Where to integrate API calls in ReactJs? — componentWillMount vs componentDidMount

Every React application which wants to fetch data or send data to the server needs to integrate APIs.

There are various lifecycle methods and it has been a topic of discussion if a component wants to integrate API, what is the right location?

There are various lifecycle methods in React and knowing about lifecycle methods will help you in becoming better React developer.

If you have any doubts on lifecycle methods, you should really go and read this blog post.

ReactJs component lifecycle methods — A deep dive_“ReactJs is a javascript library for building user interfaces” is official one liner introduction about ReactJs._hackernoon.com

Generally there are two kinds of API call integration in any client side app:

1. 
   

   **When the user demands**This kind of API call is requested by the user on various events like click, scroll, drag & drop etc. E.g the submission of forms and load more option. These kind of API calls has dedicated event functions and APIs are called from there.

2. 
   

   **When the component loads**In many scenarios, it is required that we want to get some data as soon as the component is loaded. E.g. Consider the component which shows a list of items, in this case you need to call GET API automatically as soon as the component is loaded on the browser. Another example, can be integrating APIs for analytics on load of components.

In this blog post we will talk about the integration of APIs in React app, as soon as the component loads.

We should never fetch any data in render method, as render is a pure function and calling APIs here may cause side effect.

I know, this is known to everyone. I just wanted to remind 😉

After the props and states are defined, the realm of lifecycle methods starts. Hence, these two methods are the most eligible candidates, where the APIs can be called:

1. componentWillMount / UNSAFE_componentWillMount
2. componentDidMount

1) componentWillMount / UNSAFE_componentWillMount

If you are seeing **UNSAFE_** for the first time, let me tell you in React v16.3.0 released a few days ago, it has been announced that componentWillMount will only work until version 17 and **UNSAFE_** will be prefixed to allow gradual migration. This is a very strong reason to not to use this method, but lets still find the answer for the apps which are using React version less than 17, as these methods will always remain in older react version and even for the next few versions.

In past, there has been a big debate and discussion in React community to deprecate componentWillMount and use the constructor instead and hence that has been done.

To look into the discussion please follow the following link.

Deprecate componentWillMount Maybe? · Issue #7671 · facebook/react_Let's use this thread to discuss use cases for componentWillMount and alternative solutions to those problems…_github.com

If you plan to upgrade your React version you can use the automated script to rename the name.

This has been a very common misconception among the React developers in the community that we should call API in componentWillMount so that additional render can be prevented. But, my friend, the truth is render method will always be immediately called after componentWillMount and there is no way to ask render to wait for the API call to finish.

The component’s default state and props have to be set properly to render component with null state values.

If you are doing server-side rendering of React components componentWillMount will get called on the server-side and again on the client, resulting in calling fetch two times. Hence, this is not definitely the place where we should integrate our APIs.

2) componentDidMount

This method is the right place to integrate the API as by this time render method has been called once**.**

If our component is rendered on the server, the APIs will not be called twice, once because on server side componentDidMount will not be called. Hence the API will be called only once in the client.

That was it on this blog post, I hope you got some valuable information from the post. Please applaud, comment and let me know your thoughts and share on twitter 🙂