ReactJS Tutorial – 26 – Pure Components
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703632445_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
completed video 26. Thank you 🙂
A very high-quality lesson. This cant be topped out. Thank you very much, Vishwas.
Amazing teacher
Very detailed explanation. Well done, man! You cover so many of the lesser covered topics that are integral in understanding what's happening "Under-the-hood". Much appreciated
is there any reason to get rid of the named exports and instead use the default exports when dealing with class component?
In the console I get double actions, instead of one.
I ditched Udemy's courses for this
Oh my god…the best of till now…i can't even imagine that it's absolutely free…kudos to you buddy 🔥
Thank you, champ.
Hi sir,
you explained all most all of the react topics in class components not in functional components. Now a days all the companies are using functional components. Let me know pure components can use in functional components.
i didn;t understand shallow comparison, we are not say that `setState` return new state? hence new reference even if properties is the same, then Pure Component should re-render when we calling setState whenever.
Just WOOOOOOWWWW!!!
Thank you so much. You are a complete package in all aspects…👏
Delivered so many things in this short video..
Thanks for all these tutorials, man. You are definitely one of the bests on whole youtube.
Thank you so much for this topic. The explanations are crystal clear. I wish you were my professor when I was in college. XD
👍
GG explanation
I give you like before watching your video. Because I have Vishwas that you will explain perfectly every time.💯
PureComponent – renders only if there is a Shallow change b/w values
Regular component – always renders.
1. Shallow comparison : primitive – just value; complex – references.
2. if parent has pureComponent – then child also will not rerender…….
I am confused on setState
react will call the render method only if it has any change in the state
but here it keeps set the name as vishwas then how it call render method again and again
please clarify
This Tuto is useful. Thank you
Very detailed explanation
Thaaaaank you <3
06:45
hello everyone, If anyone has the files that the proffessor explain from, can he contact me?!
11:00 not to mutate objects or arrays in props or state
8:55 pure component renders only when there is a difference between prevState and currentState
6:44 pure component implements shouldComponentUpdate with shallow props and state comparison
6:33 difference between pure component and regular component
5:30 console.log output shows that pure component output appears only once
👍👍👍👍👍👍👍
hey, can you please share powerpoint presentation? It would help us a lot!!
binge watching code evolution
love