React Render Tutorial – 11 – Incorrect memo with Impure Component
- January 11, 2024
- Posted by: MainInstructor
- Category: React
Video Title: React Render Tutorial – 11 – Incorrect memo with Impure Component
All right in this video let’s take a look at another scenario where we might potentially use react memo incorrectly first let’s do the component setup now we can reuse the parent three component so i’m going to create only the child component in the incorrect optimization folder i’m going to create a new file
Called child 4 dot js i’m going to use the snippet rafc to create a function component i’m going to destructure name from props and in the jsx add hello followed by name i’ll also include the all important log message say console.log child4render at the end let’s export a moist version
Of our child 4 component so export const memoized child 4 is equal to react dot memo passing in child 4 which is our component defined above let me quickly format this now our child component does a little more than rendering hello name it is also going to display the current time
That is hours minutes and seconds so first let’s get hold of the current date and in the jsx let’s render the time hello name it is currently date dot get ours date dot get minutes date dot get seconds so that is our child component it renders hello followed by the name prop
And it also renders the current hours minutes and seconds we also want this component to be optimized so we wrap it with react dot memo and export that component back in our parent three component let’s import it i’m going to comment out my moist child 3 and instead include memoized child 4.
Make sure to import it at the top and pass in the name prop so name is equal to name let’s now head to the browser and test this code on page load you can see that we have the log messages from the initial render if i clear the console click on change name
Both components we render the memoized child component re-renders because the name prop changed now i’m going to click on the count button clear the console click on count this time only the parent component re-renders the child component does not re-render because its props did not change you might have already realized
But this is an incorrect optimization ideally when there is a change in the ui i would also want the time to get updated if i reload the page and ask you to focus on minutes and seconds which is 10 17 you can see that when the name prop changes
The time also gets updated however with change in count the time never updates because of memorization i understand that this is a very contrived example to demo the scenario and is a very rare use case but i want to make you aware that such scenarios do exist so when you’re dealing with impure
Components make sure you’re aware of the consequences when using react dot memo by impure components i’m sort of referring to components where the jsx can change even though the props and state remain the same using date in the jsx is one such example and using randomness is another example
That i can think of if you’re using math.random to calculate a value which is then rendered in the jsx react.memo might be an incorrect optimization so that is what i wanted to highlight in this video thank you guys for watching don’t forget to subscribe i’ll see you guys in the next one
-
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
Thanks, but indeed a very confusing series!
@Codevlotion, I have a question here, why Same Element Reference technique is not applied here? We have a child (MemoizedChildThree) which is being invoked in the parent as a props (Children props) then why react didn't automatically optimized the performance by not re-rendering the children if there is a change in the state of a parent but not in props?
i was searching for these cases like when to avoid using react.memo since 2days.. finally got the answer here in this playlist. Thanku so much Vishwas..!
Awesome and useful content dude! thanks 🙂
One question though,
We see 3 side effects when rendering happens. it would be great if you could map that to what's happening inside react:
1- react green box (which you can enable in chrome react extension to draw around the re-rendered component)
2- pink highlight that chrome does on the changed element in element's tab in chrome dev tools
3- and the console.log you put inside component function body
——
I found that each of these are different and couldn't relate them to react render or commit phase (well obviously commit phase is related to devtool's pink highlighting, but what's the difference between console.log and react re-render which are the green boxes)
Hello! Doesn't this contradict with the session on "Same Element Reference"?
The state didn't change for the Child component so there must be a parent is re-rendering so we re-render? Is that the logic behind it?
Thanks
VERY NICE!
Thanks for so much great detail in this series.
This channel is really Awesome. Thank you for this type of videos. It'll take us deeper dive into React.