DEV Community

sunflowerseed
sunflowerseed

Posted on

ReactJs setState ReactJS -- If it is setting a state with the same value, will the component be re-rendered?

Function component -- setValue(v)

if v is the same value as before, then the function component won't be re-rendered (the function component won't be called).

Example: https://stackblitz.com/edit/react-zo3hnj?file=index.js

Class component -- setState({ data: v })

if v is the same value as before, then the class component will be re-rendered (the class component's render() will be called).

Example: https://stackblitz.com/edit/react-fb8npx?file=index.js

Top comments (16)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Nice demos there~

It's a confusing concept well-demonstrated.

For Class component version this.setState({ count: value }); you are changing the "reference". For the Function Component, you are changing the primitive, thus the component doesn't re-render.

React re-renders as states change. States change when a "reference" change. Primitive values are stored in stack. This leads understanding of JS.

For more info on how FC & CC differ check out

overreacted.io/how-are-function-co...

Collapse
 
nigel447 profile image
nigel447

thanks Sung really helpful article

Collapse
 
dance2die profile image
Sung M. Kim • Edited

You're welcome :)

Dan's article's are long but well written and thorough.

Collapse
 
frankdspeed profile image
Frank Lemanschik • Edited

This is a amazing example why react sucks you never know what it does when ok sure if your the inventor of react or study its code you know it but who want's to follow that?

Good Example !

Collapse
 
anuraghazra profile image
Anurag Hazra

"This is a amazing example why react sucks" this statement is wrong!

It should be "This is an amazing example how javascript handles Objects" Or "This is an amazing example how weird js is"

Collapse
 
frankdspeed profile image
Frank Lemanschik

nope your wrong its react doing this let me explain the function component is a render function thats why it can not get called again and will not get called again the class component has a render function that can and will get called again.

Thread Thread
 
johnrobmiller profile image
John Miller

Unlike the semicolon in js, the period is NOT optional in the English language, and I don't the the devs are going to change this anytime soon...

Collapse
 
fidaay profile image
fidaay

Dude, the functional component code is not well done. Try mutating the state just as you did in the class component, you'll see the exactly same behavior, do it as setState({ data: 0}), the value doesn't matter it will re-render.

Collapse
 
andreabarghigiani profile image
Andrea Barghigiani

It's just me or it re-render the function component with Hooks as well? Tryed on both to set the new value to an integer (20) and still re-render both of them 🤔

Collapse
 
smac89 profile image
smac89

The example given there is not correctly done.

Here is an updated example which uses useEffect and also shows the last time the component was updated

stackblitz.com/edit/react-xeofau

Collapse
 
fidaay profile image
fidaay

That's the same thing lol

Collapse
 
sunflower profile image
sunflowerseed

can you change the class component so that it behaves like useState(0)?

Collapse
 
wolverineks profile image
Kevin Sullivan • Edited

If you extend the class component from React.PureComponent it will do a shallow comparison on props and state to determine if it should rerender.

That being said, doing this is usually slower than allowing the component to rerender.

Collapse
 
frankdspeed profile image
Frank Lemanschik

yes thats correct look for example dev.to/frankdspeed/the-html-compon...

Collapse
 
mohamedlamineallal profile image
Mohamed Lamine Allal

Unless the Class extends PureComponent

Collapse
 
johnrobmiller profile image
John Miller • Edited

This is strange design from the React developers. Knowing that one should remove confusing inconsistencies like this is very basic design practice.