How To Call An API In Your React Component

In this tutorial, you will learn how to call an API and render that data in a ReactJS component. The first thing that I should outline is that there are a number of ways to pass data into your components. The most optimal solution for your needs will depend on the size of your application and team. If you are building a large enterprise-level app, fetching data using React Hooks or Redux might be a better approach. In this tutorial, I assume that you are working on a fairly small app and that you want to avoid all the extra code and complexity of using something complex by sticking with a more similar method.

In this tutorial, we will use the good old fetch() API to request our data. This means we can use promises, instead of the older XMLHttpRequest syntax and avoid the dramas of having to deal with callbacks and callback hell! Assuming we need to support older browsers will have issues using fetch/promises natively. Instead, we will need an alternative method. In this tutorial, we will use this package: fetch. fetch() provides all the polyfills needed to work in older browsers.

Where To Put The Code

When we write stateful components in React, we have two lifecycle hooks that we could add to our data fetching code, componentWillMount() and componentDidMount().

componentWillMount() will be called first. The issue with putting our API code within componentWillMount() is that it's fired on the server and client rendering. Firing async calls within a component on the server can lead to odd and unexpected behaviours. This is why when you look at all the React examples on the web, you can see all the API async calls are made within componentDidMount(). When I first started using React, this seemed a bit counterintuitive to me, so it feels a good point to walk through this process in detail to ensure you do not get caught out 🤪

In the first step, the component is loaded without the data. To render data an argument/prop needs to be added onto the component so the API data can be passed into it. The argument to store this data needs to be defined in the components state. The first time a component is called, this data prop will not have anything as it will be null. The component is rendered when the React handler calls its render() method. After this has happened, the components componentWillMount() will eventually be called. Within here the AJAX request is made to the API. When the data is returned, you add the data into the property we defined within the component state. This change in state causes the components render() method to be recalled. This time the data does exist so the data returned any the API can be rendered within the render() method. Due to this approach, when you write components, it is best to have a loading state, or, a spinner that displays until the data prop is populated.

We have talked a lot of theory, let us see how this theory translates to code. A component to call an API could be built like this:

When componentDidMount() gets called, fetch() makes a request to the API. fetch() uses a promise, when data is successfully returned, then is fired. The logic in then needs to checks that the API works as expected, if it did, we return the JSON. In the code, we are promise chaining. This is why it has two then() statements. In the second then() the state is updated with the data. This update causes therender() method to be automatically retriggered.

💡 If you wanted to make the code slightly more declarative, you could consider using a package like render-if or react-only-if to make your code a little easier to read.

That covers the basics of getting data in a ReactJS component. If you only need to get data once in your codebase then this approach is fine. If you need to get data in multiple components, then you should consider something like the container and presentation pattern. You could split the code up into two smaller components following a higher-order component strategy. More information about this can be found here, Using A Higher-Order Fetch Component To Create A Cleaner React Code Base.

I hope this tutorial helped you understand how a React component works and how to render some API data from it. Happy Coding 🤘