ReactJS: How to make a component call a method only the very first it is rendered?

Question

I would like for a component to call a method only once, and only the very first time the component gets rendered. I attempted it in constructor(), thinking that it is supposed to occur only once and only when it is first mounted ever, but looks like whenever that component is rendered again, the constructor() is called again as well.

Is there a way to have a component call a method only once and only the very first time it is rendered?

Thank you

Solution

componentWillMount() gets called pre-render and only once until the page refreshes.

https://facebook.github.io/react/docs/react-component.html#componentwillmount

componentDidMount() gets called immediately after render() and the DOM is available at this time. This will happen only the first time it's loaded until the page refreshes.

https://facebook.github.io/react/docs/react-component.html#componentdidmount

Comments

[Admin]

But componentDidMount() is called again whenever it gets re-rendered correct? I would only want it to be called only once and only the very first time, and never again even if the component gets re-rendered.

[Eric Kambestad]

Nope, the mount lifecycle methods only get called when the component first loads.

[Admin]

So say there is a page called Home and another page called Profile. The very first time Home gets rendered, I would like to populate some data for data initialization. Then I navigate to Profile page, then come back to Home page, both the componentWillMount() and componentDidMount() will be called again, correct? But I would only want the data initialization to occur only the very first time it gets mounted and never after, even if navigating among different pages.

[Eric Kambestad]

You are correct.. navigating away from the page destroys all of your components and rebuilds them when you come back. It sounds like you are doing some sort of site-wide data retrieval at this point and if that's the case I would recommend one of 2 things. First, some sort of state management like Redux where you populate your store with your data and can use it at anytime, in any component. Second, make your call in the componentDidMount() of the top-most component and feed the data down through the children using props. Both ways would be perfectly acceptable for site-wide data.

[Admin]

I'm using Redux but even in that case, the top most component always gets re-rendered if the child component gets re-rendered, so either way, componentDidMount() would always be called again, so the data would be reinitialized over and over again?

[Eric Kambestad]

I think I see what you are saying.. When you say "re-render", you mean a page change right? This will always rebuild your components so yes, they will get called. If you are using Redux you could dispatch your getAllTheData function in the top-most component (or even in the routes file if using React Router) and that will fill in your store. Then, in the components you can just check your store for the data and leave those calls completely out of the lifecycle methods. As long as you don't refresh the page, the data will remain in the store.