React Render Tutorial - 5 - State Immutability

📱 Follow Codevolution

State Immutability and rendering behaviour in React

[worldinnumbers]

We love your way of teaching Vishwas ❤️

[amarj]

Where were you for all these months and years..? I mean this is pure gold. I did the course of Kent Doods and Ryan Florence but the way you teach is way more awesome. Finally I understood how react works. You should make more paid courses for react, react-native or node etc. Please we'll buy it for sure. So thankful to you. Respect

[mostinho]

Done thanks! If your state is an object then the reference to the object has to change if you want component to render. Use one t literal with spread syntax to update an object that way setState gets new reference

Same for arrays, just pushing new elements doesn’t cause rendering, need to use spread operator to get new referrnce

[authenticnaturalnoises]

Can you please do a series for React Native?? your tutorials are very impressive and helpful in all ways! thank you

[siyaram]

Hey Vishwas...thank you so much for everything!
It really matters a lot and makes a ton of difference in our lives!

Since you are active again, and i know you don't reply often but still i am really curious on this..could you share
What do you think if react recoil?

Waiting for your reply!

[muhammadahmedjaved]

Your tutorials are very high quality
I've learnt alot

[pawanbhatt]

waise no need of comment your content always rock buddy

[mattisnumber]

Thanks Vishwas - This was very helpful.

[siehrichmond]

vishwas😍you have really help me on react, thank you

[adibsadeghi]

that was my interview question thanks vishwaz

[indikawijesinghe]

setPerson(prev=>({...prev, fname:"bob"})) and setPersons(prev=>[...prev, "Clark", "Kent"]) is how you do it. and "initial states" are defined inside the component

[AlanSchooll]

why the component does not reRender ? Beacuse In Javascript objects are compared by Refrence not by value such that let a = {a:1, b:2} & let b = {a:1, b:2} console.log( a === b) output "False", Even object a & b has same properties output is false because javascript compares object by refrence not by value . such that let a = {a:1, b:2} and let b = a, console.log(a === b ) output will be "true" because now object a and b has same memory location . same is the case in react useState hook it require different memory location rather then simply updating the properties of an object.

[juhandvan]

React + Typescript, please make video tutorials about them. Thank bro

[elimeleg]

my component is re-rendering is it a normal behavior?

[dardaC]

Can u plz make a tutorial on next.js please. as u covering up all things related to react js it could be really beneficial to know about server side rendering . Thn x a lot.

[AlanSchooll]

In updated version of react, this will also gives you an error in the console that you cannot update state directly.

[apoleyta]

Can you make same playslist for useEffect hook please ?

[joemart]

What is the difference between

const newPerson = {}
newPerson.fname = "Clark"
newPerson.lname = "Kent"

setPerson(newPerson)

and

const newPerson = {...person}
newPerson.fname = "Clark"
newPerson.lname = "Kent"

setPerson(newPerson)

[adilsheikh]

As I understand, for objects it uses its reference & not its values, so till the object reference is not changed, object is same for React, so why to change the state. Object reference can only be changed by creating the new object...so if it is the case then a person with programming background will understand it better

[aravindpvk]

We can achieve the same result by changing the changeName function as below. Then, what is the advantage of doing it by creating a copy of the object or array?

const changeName = () => {
setPerson({ ...person, fname: 'Clark', lname: 'Kent' });
};