How to fetch data inside react apps.
Fetching data is one of the things which almost every app does nowadays. We ask for data, we edit it and we save it. Our goal is to make the UX as simple & smooth for a user as possible. Sometimes we want to fetch data in the background and sometimes in the foreground by clicking a button or scrolling a page down. Now we are going to see how, where and when we can fetch data inside a react app.
Problem
The problem is quite simple — we want to fetch data as soon as possible so a user won’t have to wait for it for a long time. To do so we need to know what data we need to fetch and we need to do that right after we have realized it. Sometimes we can do that right away, sometimes we cannot. Let’s say we want to show all the User’s friends list, it will be our imagined example.
Where
The ideal place to create and send requests would be our entry point. If we talk about apps in general then the entry point of every app would be index.js. That’s what is being rendered in the very first time so we might want to fetch data there, only if we don’t have routes. What if we have routes and for each route we want to fetch different data? Firstly, we need to understand what would be our entry point? If for the whole app it is index.js then for routes it would be the render function of route’s component e.g. it’s a place where we already know what component we need to render for that specific route.
Secondly, we need to start loading data, wait while it’s being fetched, meanwhile show a spinner and finally when data is fetched we want to show the component.
How
Ok, now we know when we need to start fetching data, let’s talk about how we’re gonna do it.
It depends on what tool you are using for serving data but anyway it’s quite simple: you need to create and send an XHR request. You can do it by calling fetch. If you use redux you might end up using sagas for it or thunk. I personally prefer saga because it’s declarative and to handle side-effects is much easier with sagas rather than with thunk. This is how we do it at @unicorndev:
We have a component called Resolve, which is a HOC. Takes a saga → runs it → whilst data is being fetched shows a spinner → when data is ready shows the needed component(FriendListContaner).
When
We know how and where to fetch data, but when do we need to do that? It’s obvious that we need to do that as early as possible, so it would be the first place where we know what data we need to ask for. What options do we have:
- componentDidMount
- componentWillMount
Those are the most popular lifecycle hooks for working with side-effects. You need to check what’s the difference between those two hooks, but we’re using componentDidMount at @unicorndev but it’s another story.
End
This is one of the most common problems nowadays in software development. People try to solve it in different ways, some try to fetch all data on the server side, some use query languages to reduce the amount of data so it can be fetched faster. I hope this article gave you an idea of how to fetch data and how to do it as fast as possible.
What else? If you’re learning React then you might like these articles as well:
Please like & share. Peace.
