React Insights: a simple ‘Blogs Application’ from Scratch (Part-3)
How to fetch data using React? How to create custom hook?
Links to every other section of this series>
Part 1: React Environment setup ||| Part 2: How to list Data on webpage with React ||| Part 3: How to fetch data using React ||| Part 4: How to use Routing capabilities in React ||| Part 5: How to use useParams hook to load page based on URL ||| Part 6: How to use form fields on React application ||| Part7: How to perform delete action in React
The objective is to understand and learn how data is fetched from the server in a React application. In real-world scenarios, every application serving over the internet involves interaction with data fetched from some storage. Large-scale applications typically operate with robust storage mechanisms like databases. The data is served through a middle layer that creates an API endpoint, which then forwards the response back to the client layer.
Note: since we do not have an established endpoint, for the purpose of this article, we will use the json-server, that can be used as end point
Create a folder within the project named “data”. Inside this folder, create a file named “db.json” and transfer the blogsData (shown in part(2) of this series) from the JavaScript file to the “db.json” file.
Now let’s initiate the Json-server to start a sever locally, serving the db.json file with the API endpoints. Get to know more about json-server at https://www.npmjs.com/package/json-server
Execute the command in the terminal, and you will receive the API endpoint to fetch this data in the application. You can either click the endpoint or copy it into the browser; this will display the JSON file served directly in the browser.
Now, the objective is to retrieve data from the JSON file in the application to list the blogs. The React logic to set state will remain unchanged; the challenge lies in determining how to fetch the data and ensuring that React updates the blogs list with the fetched data.
To achieve this, we will leverage the useEffect hook provided by React. This hook is executed immediately after the React component is rendered. Additionally, there is a dependency array in the useEffect method that allows us to specify when the useEffect method should be triggered by React.
For the application example, we will use an empty array for dependency array, as an indication to the React to run the useEffect only once on initial component render.
Read through the comments explaining the code.
Verify the network tab to confirm that the Request URL is making a GET call to the server, and the server responds with a Status Code of OK (200). This signifies that the Blogs application is successfully fetching and utilizing the data from the “db.json” file.
In a typical application, making calls to the server to fetch data is a common and frequent occurrence across various pages. We have two choices: either repeatedly write the same logic for fetching data, or, for better programming practices, code reusability, and maintainability, externalize the useEffect logic into a function.
This can be accomplished by creating custom hooks that internally include the useEffect hook with the fetch logic.
Create a custom hook file named useFetch.js, ensuring that the function’s name begins with the word ‘use’.
home.js will be streamlined as follows, and upon loading the application, it should function as expected.
Learnings so far
- Fetch data in React application, using API endpoints
- useEffect for to wrap fetch call
- Create custom hooks & their references
What next?
- Example showing navigation and routing capabilities provided by the React Router library in React applications
Hope this helps!!! Please check out the rest of the parts in the series.