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 component.  First thing I should mention is that there are a number of ways to pass data into your components.  Which way is best for you will depend on the size of your application and team. 

If you are building a large enterprise level app, then calling your data on your app start and using Redux and storing it in the state might be a better approach.  You could also use the new React Hooks feature to compose them in.  

In this tutorial, I assume you're writing a fairly small app.  You want to avoid all the extra code and complexity of using Redux and stick with a more similar version.

Making Async Requests

In this tutorial, we will use fetch to request our data so we can use promises, instead of the older XMLHttpRequest and having to deal with callbacks.  As we need to support older browsers - which have issues with fetch/promises - we will need to 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 ad componentDidMount.

componentWillMount is first. The issue with componentWillMount is that it's fired on server and client rendering. Firing async calls within a component on the server can lead to odd and unexpected behavior. This is why when you look at all the React examples on the web, you can see all the async calls are made within componentDidMount.

When I first started to React, this seemed a bit counterintuitive to me.  The component loads without the data and renders.  Then componentWillMount is made and an AJAX request is made.  When the data is returned, you add it into state.  This automatically causes render()  be re-triggered.  The component is then re-rendered.

Due to this approach, when you write components, initially load it is best to have a loading state, or, a spinner that only fully renders a component when your data (passed in via a prop) exists.  The code for this request could look like this:

export class MyComponent extends PureComponent {
    componentDidMount() {
      fetch(apiUrl), clientRequest.timeout), clientRequest.delay)
            .then(response => {
                const { ok, status } = response;
                if (ok) {
                    return response.json();
                }
                // Do something
            })
            .then(data => this.set-State({data})
            .catch(error => {
                // Do something
            });
    }
      render() {
        const {
            data
        } = this.props;

        if(!data) {
           // Data not laoding, display spinner
        } else {
          return (
                <ul>
                   {this.state.data.map)(item => ( <li key=data.id">data.value</li>
                </ul>
        }

When componentDidMount gets called, fetch makes a request to the API.  Fetch uses a promise when data is successfully returned, then is fired.  After implementing some logic checks that the API works as expected, we return the JSON.  In the second then the state is updated with the data.  The render() method will then 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.  If you only need to get data once in your code base then this approach is fine, however, if you need to get data in multiple components, then you might want to consider using something like the container and presentation pattern.  You could split the code up into two smaller components in a higher order component strategy.  One re-usable component that gets the data and one stateless component to render your data.  More information about this can be found here, Using A Higher Order Fetch Component To Create A Cleaner React Code Base.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top