ReactJS Tutorial - 26 - Pure Components

in this video let's learn about pure components in react now so far we have been creating class components by extending the component class from react you can see that even the app component extends from react dot component well it turns out there is a second way to create a class component and that is by extending the pure component class from react let's take a look at an example I'm going to create a new file called pure component dot Jas this time though I am going to use the react snippet our PCE to create a pure component so straight away you can notice the difference instead of importing component from react we are now importing pure component and extending the same now I will get rid of the named export and for the JSX simply add the text pure component back in app component I will include the pure component if you now save the file and take a look at the browser you should be able to see the text pure component nothing new or different when compared to the regular component class which brings us to the question what is the difference between the component class and the pure component class and also when should we use one over the other I want to help you understand the answer to that question by walking you through a simple demo that involves both the classes for this demo I need a regular component a pure component and a containing parent component that is capable of changing its state by now this should be pretty straightforward so let's quickly get it done we already have a pure component so let's create a regular component new file called regular component j/s and within the file used the react snippet RCE to create a class component I will get rid of the named export and for the JSX add the text regular component now let's create the parent component again a new file called parent component dot j s and this will also be a class component RCE I will get rid of the named export and for the JSX I'm going to have parent component now we also need to be able to change the state of the component so let's add a bit more code I will add a constructor using the snippet our Const and I will create a new state property called name and set it over Schwarz next I will add the component dip mount lifecycle method and within the body I will create a timer set interval accepts two arguments the first one is a function which will be an arrow function and the second argument is the interval I will set it to two seconds within the arrow function body I will call set state but what I will do is set the name property to Vishwas again no change from the previous value whatsoever next I will include the regular and pure components in the JSX passing in name as a prop regular component name is equal to this dot state dot name pure component mean is equal to again this dot state dot name now let's include this name prop in the regular and pure component this dot props dot name and again this dot props dot name finally in app component let's replace pure component with parent component if you now take a look at the browser you should be able to see the expected output current component regular component vishwas and pure component vishwas what we are really concerned about in this example though is when the render method is called in each of the components so let's go back to vs code and add a console log statement in all the three components in parent component within render at a console.log parent component lender within the regular component we are going to have regular component render and similarly within the pure component pure component render let's head back to the browser and take a look at the console I will refresh the page and now you can see the render method logs initially we have parent render regular component render and pure component render but after that every two seconds the set state method is called which will rerender the parent component and if the parent component rear Enders the child components will also rear ender unless of course you return false from should component update so you should see the render method from both regular and pure components being logged however we see that it is not the case every two seconds parent and the regular component are rear-ended but the pure component is never rear-ended this is the difference between the regular component class and the pure component class a regular component does not implement they should component a big method it always returns true by default a pure component on the other hand implements should component update with a shallow prop and state comparison now what exactly is shallow props and state comparison let's take a look we can study about shallow comparison with respect to primitive and complex types for two primitive types a and B like numbers strings and boolean a shallow comparison B returns true if a and B have the same value and are of the same type for example if a and B are both strings with the value Vishwas the shallow comparison returns true for complex types like objects and arrays a shallow comparison B returns true if a and B reference the exact same object for example consider three variables a is an array one two three B is also an array one two three and then we have C which is assigned to a in this scenario a shallow comparison B will return false even though the items in both the areas are the same those two arrays do not reference the same object a shallow comparison C on the other hand will return true because they point to the same object and this is the case with objects as well so let's consider three variables again a B and C a is an object B is also an object they have the same properties but a shallow comparison B will return false we then have variable C which is assigned to a so a shallow comparison C will return true both of them reference the exact same object now that we understand shallow comparison the pure component definition will make much more sense a pure component implements should component update with a shallow prop and state comparison it does a shallow comparison of previous state with current state and previous crops with current crops and only when the shallow comparison indicates there is a difference the component will rerender in our example we are dealing with primitive types and props comparison we are sending a prop which is of type string and has a value of Vishwas every two seconds the pure component sees that the previous crop value of Vishwas is no different from the current probe value of the Schwarz and hence does not rerender and because a regular component does not implement this check it will always rerender and what we have seen is a shallow comparison of props but it's pretty much the same for state comparison as well I will now change the parent component to extend pure component instead of the regular component class pure component and pure component if we now take a look at the browser and refresh you can see that there is the initial rendering of all the components parent regular and pure and two seconds later there is no rerender the parent component checks previous state with current state and sees that there is no difference and hence there is no rerender but what you should keep in mind is that if the parent doesn't rerender the children also will never rerender and that is why we don't see any statement logged in the two-second intervals so we can answer the question why to use pure components pure components by preventing unnecessary renders can give you a performance boost certain scenarios for example let's say you're rendering a list of 50 items by not rear-ending them when it is not required they're going to have a good performance boost a key point to keep in mind is that you should not mutate object or arrays in props or State for example if you need to add a new item to the list don't mutate it by pushing the item into the list the reference to the area never changes and because pure components only check for that the component will not rerender even if there is a difference always return a new object or array when dealing with pure components all right let me quickly summarize what we have learned in this video in react we can create a component by extending the pure component class a pure component implements the chute component update lifecycle method by performing a shallow comparison on the props and state of the component if there is no difference the component is not rerender thereby providing a performance boost when you create a pure component it is a good idea to ensure that all the children components are also pure to avoid unexpected behavior finally when you are using pure components never mutate this state always return a new object that reflects the new state well having discussed this let me tell you it's probably safe to use regular components most of the time unless of course you are seeing a performance head in some components alright that is about pure components thank you guys for watching don't forget to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 164,163

Rating: 4.951014 out of 5

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Pure Components, React Pure Components

Id: YCRuTT31qR0

Length: 12min 44sec (764 seconds)

Published: Wed Jan 02 2019