When writing code within your React app, you will most likely need to fetch data from an external API in order to render views based on that data. However, introducing asynchronous code into your app always comes with an overhead of complexity. To help combat this complexity, React introduces component lifecycle hooks. Component lifecycle hooks are methods that are triggered at certain phases in a component's "lifecycle." The two most common component lifecycle hooks that have been used in the past when it comes to HTTP requests are componentWillMount
and componentDidMount
.
In this guide, you will see how componentWillMount
and componentDidMount
have been used to make HTTP requests in the past. You will also discover how to execute multiple HTTP fetch requests for data within them.
componentWillMount
used to be an integral part of any component's lifecycle. I say "used to be" because now, componentWillMount
is deprecated as of React v. 17! In a lot of apps, it was the lifecycle hook that was used to request data, as the name sort of suggests that this would be the place to do it! However, the problem with this approach was that a component render
function was guaranteed to run before the HTTP request(s) was executed within componentWillMount
. This often meant that your component had no data to show within its view layer if that data relied upon the HTTP request.
Because of this, you ultimately need to have some sort of default data or loading screen to show until the HTTP request comes back since the render
function will end up running before the successful execution of the request. Ultimately, this means that you can drop the use of componentWillMount
and simply set up some default data or a loading screen within the constructor of your class component. You can then move your HTTP request over to the componentDidMount
lifecycle method. The componentDidMount
lifecycle method is guaranteed to run directly after the execution of the first render
function. This makes it a reliable choice for fetching data!
In this section, you will learn how to make HTTP requests using the Fetch API from two different locations and merge the results. Let's jump into the code!
1import React from 'react';
2
3class MyComponent extends React.Component {
4 constructor(props) {
5 super(props);
6
7 this.state = {
8 mergedData: this.props.defaultData
9 }
10 }
11
12 componentDidMount() {
13 Promise.all([
14 fetch(this.props.urlOne).then(res => res.json()),
15 fetch(this.props.urlTwo).then(res => res.json())
16 ]).then(([urlOneData, urlTwoData]) => {
17 this.setState({
18 mergedData: urlOneData.concat(urlTwoData)
19 });
20 })
21 }
22
23 render() {
24 return (
25 <div>
26 <h1>Check out this Data!</h1>
27 <DataView data={this.state.mergedData}/>
28 </div>
29 )
30 }
31}
In the trivial example above, you can see the MyComponent
component. This component is getting some default data from props via a parent component. This is the data that will be shown initially.
Then in the componentDidMount
lifecycle method, multiple fetch statements are being executed against two different APIs. The Promise.all
method is used to combine the results of these calls to fetch
into a single array. Using Promise.all
allows the component to execute these requests in parallel. Once both responses complete, you will have an array containing two sub-arrays. The setState
method is then called in order to set the mergedData
state based on the concatenated result of the two sub-arrays.
And there you have it! You just learned how to use the Fetch API to execute multiple HTTP requests from within the componentDidMount
lifecycle method.
The componentWillMount
lifecycle method is a relic of the past. Please use it with caution! Going forward, all HTTP requests should be made from within the componentDidMount
lifecycle method.
There is also another way to fetch data if you are using a functional component instead of a class component. That way is to use the useEffect
hook. For more information regarding useEffect
, please check out the React documentation.