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

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:

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

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./bvaughn/923dffb2cd9504ee440791fade8db5f9

• javascript
• reactjs
• react-ponent
• react-lifecycle-hooks

• 2 Where do you see it running 2 times ? It runs once when mounting and once when updating. Those are 2 different things – Weedoze Commented Jan 6, 2020 at 8:15
• 1 The first one is the initial render call during Mounting, the 2nd one is every subsequent render. – user5734311 Commented Jan 6, 2020 at 8:15
• 2 "All I know is that any function in React Life-Cycle runs only once" - that's not true at all. Some of them only run once during a ponent's lifecycle, such as ponentDidMount or ponentWillUnmount, but some of can run a limitless number of times, such as render or ponentWillUpdate. As for your question, render runs when the ponent mounts, and every time the state or props change, UNLESS you implement a custom shouldComponentUpdate function, which you can use to look at the current and previous props/state and manually control if it should re-render – Jayce444 Commented Jan 6, 2020 at 8:20
• 1 Render can also re-run if the parent re-renders, though there are ways to avoid this (which is a good idea, since you may not always want to re-render a ponent just because its parent re-renders). There are posts/articles about ways to do that – Jayce444 Commented Jan 6, 2020 at 8:21
• 1 OP, you don't think render runs twice only, based on this list, do you? The entire Updating part will run multiple times, over and over, while the ponent is mounted. – user5734311 Commented Jan 6, 2020 at 8:29

3 Answers 3

Mounting

At first, Reactjs will render method only once and the lifecycle would be:

constructor();
static getDerivedStateFromProps()
render();
ponentDidMount();

Updating

But as you update ponent state or on receiving new props will trigger the following lifecycle:

static getDerivedStateFromProps()
shouldComponentUpdate();
render();
getSnapshotBeforeUpdate();
ponentDidUpdate();

note that, returning false from shouldComponentUpdate() will not trigger render

All methods except render() are optional

For a ponent, 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 ponent is mounted, only constructor and ponentDidMount will run once (excluding ponentWillUnmount which also run once when the ponent is unmounted), while the other lifecycle methods can run unlimited times, depends on the number of updates of that ponent.

Short answer is that whenever a value of state or prop will change,your render method will run until and unless you are force stopping by returning false from of the life cycle method as @Navin Gelot mentioned,then it will not run render method otherwise yes.