javascriptreactjsreact-componentreact-lifecycle-hooks

How many times render will actually run in a React Component

I was going through React LifeCycle methods when I got stumbled on this:

enter image description here

I got confused as I am seeing render() function to run 2 times. All I know is that any function in React Life-Cycle runs only once. So, why am I seening 2 render functions here (or running 2 times). Won't it affect the memory and overuse for running 2nd time.

Also, How we know where render function would run (or at what stage) as it can run at 2 places in React Cycle. Kinldy, help clarify.

Reference:

https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9

Solution

  • For a component, the render() function obviously can run more than once for the same mount. You may refer to this table from the React docs.

    From the table, it's clearly that if a component is mounted, only constructor and componentDidMount will run once (excluding componentWillUnmount which also run once when the component is unmounted), while the other lifecycle methods can run unlimited times, depends on the number of updates of that component.