How many times render will actually run in a React Component

Question

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

Where do you see it running 2 times ? It runs once when mounting and once when updating. Those are 2 different things — Weedoze, Jan 06 '20 at 08:15
The first one is the initial render call during Mounting, the 2nd one is every subsequent render. — , Jan 06 '20 at 08:15
"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 component's lifecycle, such as `componentDidMount` or `componentWillUnmount`, but some of can run a limitless number of times, such as `render` or `componentWillUpdate`. As for your question, `render` runs when the component 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, Jan 06 '20 at 08:20
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 component just because its parent re-renders). There are posts/articles about ways to do that — Jayce444, Jan 06 '20 at 08:21
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 component is mounted. — , Jan 06 '20 at 08:29

Navin Gelot · Answer 1 · 2023-08-08T10:44:36.347

Mounting

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

constructor();
static getDerivedStateFromProps()
render();
componentDidMount();

Updating

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

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

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

All methods except render() are optional

score 2 · Accepted Answer · answered Jan 06 '20 at 08:33

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.

score 1 · Answer 3 · answered Jan 06 '20 at 09:41

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.

How many times render will actually run in a React Component

3 Answers3