React Render Tutorial - 5 - State Immutability

all right in this video we are going to talk about rendering and state immutability we've already seen that when it comes to use state and use reducer react does not re-render a component when the new state is the same as the old state however our examples only involved working with primitive types in this video let's understand the rendering behavior when we try to mutate objects and arrays i'm going to begin by creating a new folder in the components folder the folder name is immutable state within this folder i'm going to create a new file called object use state.js within the file i'm going to use the snippet rafc to create a function component next let's import use state from react in this component we will deal with state as an object so i'm going to declare a new state variable with two properties const in its state first name is bruce last name is wayne we are going to use this object as the initial value for ru state hook so in the component the state variable is going to be called person the set of function is set person and the initial state is init state in the jsx i'm going to add a button on click of which we're going to change the first name and the last name it's a button the inner text is basically going to be person.fname and dot l name and on click we're going to call a function called change name now let's define this function const change name is going to be equal to an arrow function and we are going to change person dot f name equal to clark and person dot l name is equal to kent and then we call the setter function set person passing in person of course we need to log the statement to verify the render so just before the return keyword console.log object use state render let me format this save the file include it in app.js and test it out in the browser on page load you can see that we have the log statement from the initial render if i clear the console and click on the button we are changing the properties of the person object and then calling the setter function however you can see that the component does not re-render this is again because of the object dot is algorithm that react uses when we use object as state the reference to the object must change for the component to queue a re-render after comparing the old and the new state and this is a common mistake we tend to make as beginners directly mutating the object and expecting the component to re-render to fix this create a copy of the old state so const new person is equal to spread operator then the person object and then modify this new object copy so new person dot fname is equal to clark and newperson dot last name is equal to kent and then pass this into the setup function so set person new person if you now take a look at the browser you can see that we have the initial render click on the button and the component we renders now this is also the case when dealing with array as state let's quickly take a look at an example i'm going to create a new file called arrayusestate.js within the file use the snippet rafc to create a function component i'm going to import your state at the top and create a new variable called init state which is equal to an array it's a const init state it's an array with two strings bruce and wayne within the component i'm going to use the state hook and pass in in its state as the initial state so your state state variable is now going to be persons the set of function is going to be set persons and init state is the default value for the jsx i'm going to add a button that says click and the on click handler is called handle click the button we render the list of persons so persons dot map we get access to each person and we simply render a div tag where key is equal to person and the div content or the div text is also person let's now define the on click handler const handle click is equal to an arrow function and we're going to add two more persons so persons dot push clark and then persons dot push can we finally call the setter function so set persons we pass in persons let's also add the all important log statement so console.log array ustate render save the file include it in app.js and head to the browser on page load we have the log statement from the initial vendor if i clear the console click on the button we don't see the component re-rendering this again is due to the fact that array reference did not change for react to queue up a rerender when you push elements into the same array the array values change but the array reference itself does not change so react does not re-render the component to fix this make a copy of the array push items and then pass the new array into the setter function so const new persons is equal to a copy of persons so spread operator and then persons and then on this copy we push the two persons so newpersons.push clark and newpersons.per kent finally call set persons passing in new persons if you now test this out on page load we have the log statement from the initial render clear the console click the button and we have the component re-rendering and the ui updating and this is because we made a copy of the original array now this rendering behavior holds good for use reducer hook as well so i'm not going to repeat the same examples with usered user however you can look at the code on my github repo for the user end user hook but this is pretty much about state immutability and render let's quickly revisit our interface diagram and understand what happens we begin with the component tree we have the app component and the object use state component when we click on the button in the object use state component the state hooks setter function is called which flags the u-state component as needing an update react will go through the component tree and identify the flagged components it sees that object u-state component is flagged however react requires that you state or use reducer state updates must pass in or return a new reference as the new state value whether it be a new object or array reference or a new primitive value if it is not the case react will simply bail out from the render phase for that component this is the case we currently have since we mutate the object or the array we are not passing in a new reference so react does not even bother with rendering the component which is the reason you don't see a lock statement in the console and hence no ui update all right let me quickly summarize state immutability and rendering behavior mutating an object or an array as state will not cause a re-render when used with the you state or use reducer hug to re-render make a copy of the existing state modify as necessary and then pass the new state to the setup function or while returning from a reducer function directly mutating the state is an easy way to create bugs in your application make sure you don't do that all right that is about the rendering behavior in react when dealing with you state and use reducer hooks in the next video let's talk about rendering when dealing with parent and child components thank you guys for watching don't forget to subscribe i'll see you guys in the next one

Channel: Codevolution

Views: 28,023

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, Render, React Render, React Rendering, React Rendering Tutorial, React Optimization Techniques, React Render Optimization, State Immutability, Rendering

Id: -hi-QQHWlHg

Length: 11min 17sec (677 seconds)

Published: Wed Sep 16 2020