React Render Tutorial – 9 – Questions on Optimization
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704934504_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Render Tutorial – 9 – Questions on Optimization
Welcome back everyone now that we have gone through the two optimization techniques i thought in this video i’ll answer a question or two about optimization these are sort of the questions i had when i was learning about optimization and figured some of you might also have similar questions
Now the first question is when do i use the same element reference technique and when do i use react dot memo you can use the same element reference technique when your parent component re-renders because of state change in the parent component which results in the child component having to re-render
Do keep in mind that this technique does not work if the parent component re-renders because of changes in its props so same element reference yes when state is causing parent to re-render and know if props is causing parent to read endure on the other hand you can use react dot memo
When your child component is being asked to re-render due to changes in the parent components state which do not affect the child component props in any way now there is also an overlapping scenario what if the child component does not have any props react.memo should still work
In that case it is still better to go with same element reference because that is something react automatically provides for you and it also prevents you from having to add react dot memo all over your code base hopefully these points shed some light on when to use the two optimization techniques
Let’s now move on to our second and final question and this is something we all think when learning react if react.memo provides the optimization by comparing the props why not wrap every single component with react.memo or you can also rephrase it to ask why doesn’t react just internally memoize every component
And not expose react.memo to the developers to answer this question i’m going to quote dan abramoff shallow comparisons aren’t free they are oh of prop count time complexity and they only buy something if it bails out all comparisons where we end up re-rendering are wasted why would you expect always comparing to
Be faster considering many components always get different props i can’t put that in even simpler terms but let’s make use of some math to understand what he’s saying let’s say a normal component takes 10 milliseconds to render obviously we want to optimize this if possible so we wrap it with react dot memo
Now dan mentions that shallow comparison isn’t free which means it doesn’t happen in 0 milliseconds let’s say the shallow comparison takes 2 milliseconds now let’s take a look at a few v rendering scenarios let’s say in our first round of re-render the props did not change so we have the shallow comparison
Of two milliseconds and that’s it we don’t have to render the component in the next render let’s say the props changed so this time react first does the shallow comparison costing us two milliseconds and because the props aren’t the same react renders a component which takes 10 milliseconds
Now we have taken 12 milliseconds in total to render the component provided that many components most of the time always receive new props your component rendering history could be something like this 10 milliseconds for initial render 2 milliseconds for optimized render 12 milliseconds for re-render 12 milliseconds for re-render 12 milliseconds for re-render
And you get the point so by wrapping everything in react.memo can actually be detrimental to the performance of your app therefore it is always a good idea to memorize only expensive components where the props hardly change another point to keep in mind is when you optimize the rendering of
One component react will also skip rendering that components entire subtree because it’s effectively stopping the default vendor children recursively behavior of react well i hope that answers a few questions that you might have about optimization in react now i just mentioned that it is not a good idea to wrap every component
With react.memo in the next few videos i want to walk you through a few examples where you could actually be incorrectly using react.memo thank you guys for watching don’t forget to subscribe and see you guys 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
I have a question. What if we pass the children prop component as render prop pattern. Why does same element reference fails then? I tried wrapping the render prop callback in useCallback still same element reference fails
I was just checking an old project of mine, and easily noticed so many unnecessary re-renders, then immediately applied things I learned from Codevolution. It was a quick fix because Vishwas explained the process clearly.
Super thank you so much!
Please make the videos on node js with react
it just blew my mind puuuffff…
Great Video !!
Thank you very much for your videos, they help me a lot.
Очень хорошо
Excellent explanation. You're the best react teacher on youtube.
VERY NICE!
Hey vish, can you make a video on Recoil library. So that we could understand easily with your explanation.
Great job..!, I would like to suggest a topic for next tutorial which is React-query it's a great one to use in React js applications
Your videos express love of full stack development. Your voice tone makes the videos engaging and addictive.
I am a begineer in full stack development and request you to enlight me as well as other begineers with your full stack developer path.
Great work , could you pls cover profiling react apps also
Great work!