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 is a javascript library for building user interfaces” is official one liner introduction about ReactJs._hackernoon.com ReactJs component lifecycle methods — A deep dive Generally there are two kinds of API call integration in any client side app: **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. **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: componentWillMount / UNSAFE_componentWillMount componentDidMount 1) componentWillMount / UNSAFE_componentWillMount If you are seeing for the first time, let me tell you in React v16.3.0 released a few days ago, it has been announced that will and will be prefixed to allow gradual migration. This is a very 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. **UNSAFE_** componentWillMount only work until version 17 **UNSAFE_** strong In past, there has been a big debate and discussion in React community to deprecate and use the constructor instead and hence that has been done. componentWillMount To look into the discussion please follow the following link. _Let's use this thread to discuss use cases for componentWillMount and alternative solutions to those problems…_github.com Deprecate componentWillMount Maybe? · Issue #7671 · facebook/react If you plan to upgrade your React version you can use the to rename the name. automated script This has been a very common misconception among the React developers in the community that we should call API in so that additional render can be prevented. But, my friend, the truth is render method will always be immediately called after and there is no way to ask render to wait for the API call to finish. componentWillMount componentWillMount 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 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. componentWillMount 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 component will not be called. Hence the API will be called only once in the client. DidMount 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 🙂

Facebook

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

ReactJs component lifecycle methods — A deep dive

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

ReactJs component lifecycle methods — A deep dive

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps