React Render Tutorial – 10 – Incorrect memo with children
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704948943_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Render Tutorial – 10 – Incorrect memo with children
In the past few videos we learned about the usage of react memo although it is an api used to optimize the rendering behavior you could also end up using it in incorrect situations where it’s not really going to help let’s take a look at those situations with an example
In this video i’m going to show an incorrect memoization with children props first let’s set up the components needed for this example in the components folder i’m going to create a new folder called incorrect optimization within this folder i’m going to create two new files parent3.js and child3.js
To speed things up i’m going to copy the code from parent 2 into parent 3 and from child 2 into child 3. now let’s make the modifications first in child3.js i’m going to change all occurrences of child 2 to child 3. then in parent 3.js change all occurrences of parent 2 to parent
3 also change child 2 to child 3. now this is the basic react memo example we had seen two videos earlier let’s make sure it still works as expected in app.js i’m going to include parent 3 component and head to the browser on page load we have the log messages from the
Initial render of both the components if i clear the console and click on the name button where the components re-render and this is the expected behavior because name is passed down as a prop to the child component if i clear the console and click on the count button
Only the parent component re-renders the child component does not re-render because it is wrapped with react dot memo so everything is working as expected now let’s go through a scenario where react dot memo is incorrectly used a lot of the times we tend to have components nested at various levels so let’s say
Our child 3 component in the parent component also has another child so instead of the self-closing tag we are going to have opening and closing tags and for now let’s add a simple hello text as its children next in child 3 component i will destructure children and
Name from props and include it in the jsx this is going to be children followed by name let me format this save the file and head to the browser now you can see that we have hello vishwas which corresponds to the jsx in the child 3 component let’s observe memoization now i’m going
To clear the console and click on change name in both the parent and child components we render i’m going to clear the console and click on the count button and only the parent re-renders so the memorization still works fine if you are passing in a text node
If you’ve been developing react apps for a while now you’ll realize that children components are often other html elements or custom components and not plain text nodes so i’m going to wrap this hello text with a strong html tag so strong and then formatted so we have the child component
And as its children we have a strong html tag with text inside it let’s save the file head to the browser and now observe the memorization behavior i’m going to clear the console and click on change name and both the components we render i’m going to clear the console again and
Click on the count button to our surprise we see that both the components we render even though the name value did not change the child component re-rendered this is because of the children props in react props dot children is always a new reference which will cause the child component
To always render so the takeaway from this video is that there is no need to wrap your child component with react memo if the child component itself has children elements as we see here in this case the incorrect memo will simply add to your component render time
As new references to the children props will always cause the memoized child component to re-render in the next video let’s take a look at another scenario where we might incorrectly use react memo
-
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
This is amazing, thanks!
in this video you said that children.props are always a new reference but in previous children prop was same element reference
thank u!
I did not get it. Are we saying that if the children prop is a primitive, in this case it is the string 'hello', memorization works… but if the children prop is an object, which in this case it is the jsx element 'strong', memorization does not work?
I am here learning
very good viswas !
Thanks. If props.children is always a new reference, why was there no re-render when the value passed was text? Did you mean to say that its always a new reference for values like objects and not for primitives? If correct, then the children prop is just like any other prop when checking for shallow equality.
really wow thank you so much that's really super helpful
So basically it works on html and components passed as a children and not on texts.
The best Indian tutorials Author!
VERY NICE!