Skip to content

cstrnt

Data-Fetching in React using Hooks

React, Data-Fetching, Hooks3 min read

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 useState and useEffect and the browser-api fetch and can be separated into three steps:

  1. Provide some kind of loading state after mounting the component
  2. Fetch the data from the remote server
  3. Set the result of the fetch-request as the local state or
  4. Set the error of the request to the error state
  5. Set Loading to false
  6. Provide the data to the component

Speaking of JavaScript and JSX it would look like the following:

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 access our 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 componentDidMount function.

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 loading to 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 fetch.

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 loading to false so the user won't see the loading-UI anymore but instead sees all of the awesome posts we got on our blog!

Using isLoading or 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!)

Conclusion

Using the the useEffect and 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!

© 2020 by cstrnt. All rights reserved.