React: Is a component entirely re-rendered on every setState()?

Question

Just got a bit confused about the lifecycle in react. Here's my understanding...

The render() always run first, right? If so...
It implies that a setState() inside useEffect() only runs after the initial render(), correct?

Question:
When the above happens, does the entire component re-render?
So that would be a second time the component renders just to load a state.
Wouldn't that be a performance issue?

I thought React only re-rendered the sub-elements that change, not all elements. — Snow
– Snow, Commented Apr 11, 2020 at 5:01
I see, so only the sub-elements that depend on that state will re render when the state changes? Did i get it correctly? — pasoc30
– pasoc30, Commented Apr 11, 2020 at 5:06
I've heard something along those lines, not 100% sure though. — Snow
– Snow, Commented Apr 11, 2020 at 5:08
renders are usually super fast, unless you huge DOM structure. Also, only the changed parts go to the DOM anyway — Agney
– Agney, Commented Apr 11, 2020 at 5:10

Zohaib · Accepted Answer · 2020-04-11 06:43:41Z

On every state change render is called again but not whole component renders again.

React keeps Two DOM Tree Objects in memory:

Virtual DOM
Real DOM

React have a very intelligent and powerful diffing algorithm which calculates difference between previous DOM state and Next DOM state called Reconciliation process.

Only those sub elements which have changed would be re-rendered.
Keys help React identify which items have changed, are added, or are removed.
Keys should added to list or array elements , to give those elements a stable identity

For example, you want to delete <input key="i42"/> element from your list so on left side Its Actual DOM Tree Object and on Right side its Virtual DOM tree object. React calculates difference between two and only the difference will be Recreated Intelligently.

https://reactjs.org/docs/lists-and-keys.html

https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm

royranger · Accepted Answer · 2020-04-11 05:16:24Z

1

So the thing about React is that there are two DOMs -- one is the actual DOM, and the other is the virtual DOM. Every time there is a state change, the virtual DOM re-renders. React then compares the changes to the virtual DOM vs changes to the real DOM, and only updates the real DOM with what has actually changed. Re-rendering the virtual DOM is not a performance issue as it's super quick.

There's a cool article you can read about this

answered Apr 11, 2020 at 5:16

royranger

3831 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

React: Is a component entirely re-rendered on every setState()?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related