Data-Fetching in React using Hooks
We are going to start with the most basic approach to data fetching in React, which will not require any additional dependencies what so ever. That being said this also is the approach with the least functionality and comfort!
This approach uses three main parts: The two hooks
useEffect and the browser-api
fetch and can be separated into three steps:
- Provide some kind of loading state after mounting the component
- Fetch the data from the remote server
- Set the result of the fetch-request as the local state or
- Set the error of the request to the error state
- Set Loading to false
- Provide the data to the component
Let's break this code down into smaller chunks:
Right here we create local state variable which contains a loading boolean.
It is initialized with
false because right at the beginning we technically aren't loading anything yet.
We use this to determine whether we are currently fetching the data or if we are already done.
We would probably use this boolean to show some kind of loading animation such as a spinner or a skeleton loader to the user.
We use another state hook here to keep track of possible errors which can occur while fetching data. This can be either because there was an error on the server or you have been disconnected.
I called the next state posts because I was talking about creating a blog earlier on but you should give this state a semantic name which suites the actual data you are getting from your API. I initialized it with an empty array here because I know the data will be some sort of list of posts (which in fact is an array). This gives me the opportunity to use the handy autocompletion from vscode!
We finally reached the actual data fetching part! Hooray! And this particular code snippet right here is the react API for
doing our request at the right time. Sounds weird, right? Because we want to set a local state variable after we
successfully got our data from the server we need to do it after the component mounted. Because we are only able to
setPosts-action when react was able to mount to component. This might sound quite weird for starters. Why can't
I use a function which I just declared two lines above? Well, that's just how react works after all. But the dev team was
so kind that they added another hook called
useEffect which allows us to know when a component was mounted. We just need to
pass an empty array as the second argument to
useEffect and it will assure that this code is executed after mounting the component.
Before hooks we did this in the
After we all know what useEffect does, let's have a look inside it: First of all we are going to set our local state variable
true. Now the user will know that the application is loading some kind of data.
While the user is distracted by our nice-looking loading-UI we will start fetching the data using
Disclaimer: In this example I assume that you configured your fetch with the correct headers, auth and so on.
When we got the data from the server we will update our local
posts-state using our newly aquired data and after that
we are going to set
false so the user won't see the loading-UI anymore but instead sees all of the
awesome posts we got on our blog!
loading booleans isn't the best way to solve all data fetching problems. We don't even
cover cases like errors or a pending state. But I think it's a bit too much to go deep here in this blog post.
I'll leave you a link to Kent C. Dodds' blog post about that topic (very good read btw!)
Using the the
useState hooks is the vanilla way of data fetching react.
It teaches you something about the core concepts of react.
It also doesnt add anything to your bundle - therefore it won't affect the loading time at all.
I would go for this solution for some small POCs or really small apps because its easy and small but as soon as I need some additonal features I would chose a pre-made solution. You can read about those solutions in the next posts!