Elements, Children and Re-renders - Advanced React course, Episode 2

👉 Based on the "Advanced React" book, Chapter 2: www.advanced-react.com
The second episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks.
🎬 Episode 2: Elements, Children and Re-renders
00:00 The problem
00:59 Composition trick to reduce re-renders
3:11 What are the Elements
4:42 How rendering and re-rendering are triggered
5:29 Diffing and reconciliation intro
8:10 Children prop
👩🏻‍💻 Code examples:
1. The problem: codesandbox.io/p/sandbox/exam...
2. "content" prop example: codesandbox.io/p/sandbox/exam...
3. Components as children: codesandbox.io/p/sandbox/exam...
💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia

[@mehdichamiani6838]

Unique stuff that you won't get even in official React docs, you must be joined to the core document team in my opinion Nadia. Much appreciated your findings and sharing them to the world❤

[@developerwaypatterns]

Thank you 😊

[@mostinho7]

Thanks for the great video! 1:40 problem is that state frequent state change is at the parent component level which has a bunch of slow children that will rerender everytime state changes. You should move state down to fix this problem if you can (moving state to the child component that needs it instead of having state at the parent level). In this case, that’s not possible because what triggers state change is the wrapper div that encapsulates the children 2:10 composition trick, making the outer div component that triggers the state change take the heavy/slow children as props and then render them, instead of them being defined in the same component (getting them as props vs defining them in the same component) solves the issue of slow/heavy components re-rendering This doesn’t make sense at first because technically they’re still children of the outer div component in the react tree, but they don’t re-render when the outer div component state changes 5:30 diffing an reconciliation, understanding how react compares elements and decides to rerender explains why the composition trick prevents the heavy child components passed as props from rerendering when state changes 6:20 summary

[@paccioti]

this is what I call advanced, not even seniors at my job know this stuff 😄

[@drrodopszin]

I didn't know it either, and I am a senior for many years. I think it is a problem of a "too good to be true" abstraction. Now it all makes sense.

[@deshi-sukuna]

I went thru many youtube channels and udemy courses for 3 years now and this is the most advanced and modern stuff I found about react on youtube no cap. And trust me when I say this, new devs need this not the wild west of react ecosystem and libraries we are seeing today. Keep this up please.

[@developerwaypatterns]

Fully intend to 💪🏼

[@deshi-sukuna]

@@developerwaypatterns Letss gooo! I will be a regular for sure. 🫡

[@kevyyar]

We definitely need a full react course from you! From scratch I mean and explain it beautifully.

[@developerwaypatterns]

Maybe some day 😊

[@EBay_Dev]

Brilliant explanation. Great content and style of teaching. The nice mix of code and visuals, along with cute images. I am really excited to find your channel. Thank you.

[@xup3rr]

It couldn't be explained better, thank you !! You do memorable work and it is obvious that you love it. Congrats

[@remnantkevin]

Thank you for your videos, they use helpful examples and illustrations to explain the concepts very well. Looking forward to more 😁

[@stilltrippin4687]

Had the scrolling problem at work last month, now I can go back and update it. Cant wait to watch all the videos you have

[@Hellbending]

I guess I needed to understand “advanced” concepts before simple things hahaha, cos this made x100 more sense and helped so many things fall into place overall than a ‘click here n click this’ You’re absolutely AWESOME, pleaseeeee make lots and lots more of these ❤❤❤❤

[@developerwaypatterns]

❤️ 😊

[@Zakaria-Bli]

That was awesome, I really appreciate your explanation 🌟

[@yashpreetbathla4653]

Truly amazing content! wow 😍 These are such good to know topics no one tells us, we learn it with experience and learning thanks for summing it all up! You explain really well! waiting for ep3

[@miladtech]

So happy to find your channel , Thanks for the good content. Please keep up.

[@SachinYadav-yx1rc]

Thank you for making these videos it really gives a new perspective. Really appreciate your efforts in making these videos ✨

[@bipuljha792]

Absolutely amazing explanation. Completely blew my mind at the end 💥

[@jonathanchen4978]

These videos are amazing!!! Thank so much!

[@luisfilipeparente4786]

Amazing work on this tutorials along with your book , it's a pleasure to learn with you Nadia. thanks a lot for it

[@MasPensador]

congratualation, amazing content. I love it.. making us all fully understand the mechanisms behind react ways of working and concepts. thanks and bless

[@manikantaprasadlopinti8375]

Note: at 7:52 when the component updates state, the component type is ScrollableWithMovingBlock so it will create new virtual dom for that component with updated state so it sees the and as different compared to old dom but that content props is not recreated so it thought it is same as before so React will return false(because of div ) as the compare the two doms but it leaves that content prop and again checks the type both will have type so rerender occurs except that content prop

[@eminvesting]

Another banger, congratz :)

[@anastasiaviva5721]

ur channel is such a gem!! thank u for an amazing content! liked and subscribed ❤

[@InterestingTed]

Beautiful video, the first one too. Subscribed!

[@lifeisbeautifu1]

Amazing video! Thank you. ❤

[@sanyamjain7058]

Love your content, keep going on!❤ No-one create this type of content on yt.

[@y0na24]

Crazy good explanation!

[@dailydose7772]

Another great video . Really good teaching style and presentation. I'd pay for course when you get one live! Thanks v much Nadia.

[@satejbidvai]

This is legit really helpful!

[@samhudson1169]

In programming we're told 'just build stuff, it's the best way to learn' and details of *how* and *why* things work are hidden away in advanced courses for senior developers. Devs at all levels could benefit hugely from understanding this stuff - thanks Nadia. I'm going through your book and these vids at the same time and it's very very helpful.

[@developerwaypatterns]

Great to hear 😊

[@adrian333dev]

Awesome content!

[@jordantseng8330]

Love your content!

[@devquen37]

how can u can share a very difficult problem with just one video only 9 minutes? Amazing, I think its so helpful for us who spend a lot of time to find a solve for this topic. Again, keep going on, Nadia

[@developerwaypatterns]

I'm on a mission to end 9-hour long boring courses 😅

[@asadmalik5075]

Great Content !

[@ashutoshk23]

This is amazing explaination, you made it so easy to understand thanks 😊

[@developerwaypatterns]

Thank you! 😊 That's the goal!

[@sushantrajbanshi4508]

Christmas came early this year. Loving the episodes 😍

[@developerwaypatterns]

😊 ❤️

[@omarelsabagh9084]

Amazing!! thank you

[@loudmu]

my dear you're gold!

[@thedevelopermind]

Thanks a lot!

[@melon5063]

amazing stuff

[@jayakumar9976]

Awesome so easy to understand with animation. Your harwork and deep knowledge about react evident in video. Please make more deep dive kind of video.

[@developerwaypatterns]

Thank you :) on it!

[@nelsonfleig5024]

Great series! Love the visualizations. Hard to find some advanced topics on React on YT since most tutorials are aimed at beginner React devs.

[@ThanHtutZaw3]

Greate Content !

[@abhinasregmi9742]

Amazing work

[@luigis862]

La mejor... 🤩

[@user-lm6hy6oy5w]

can't wait for ep3

[@roshnikashyap9588]

Mindblowing! Now I am going to get rejected in interviews because most architects wont know this much :D

[@developerwaypatterns]

Haha, I hope not 😅

[@ivaylopetrov9956]

This is my favorite channel. Great work 💯 And one more thing. I would just add what is the difference between reconciliation and diffing? Reconciliation: the entire process of updating the UI in response to state changes Diffing: efficiently identifying and updating the differences between the previous and current states of the virtual DOM Diffing is part of Reconciliation.

[@developerwaypatterns]

Good point 👍🏼

[@ytbcmt4686]

Mad respect from India!

[@developerwaypatterns]

❤️

[@DioArsya]

wow cool! 🎉

[@innerstateofflow7777]

I just want to get better at React. please make more videos like this

[@sabis.9757]

Hey Nadia! Thank you so much for these videos! Really appreciate it. I am abit confused though regarding the diffing process. You mention at 6:18 > "React will compare the "type" value of the object. If this value is the same, React will trigger a re-render." Why is there a re-trigger if the type values are the same? Isn't it enough to say that if the comparison in the first step is false, that means there is some update and React will trigger a re-render. I don't want to miss any useful info and was hoping to understand this more deeply. Thank you!!

[@developerwaypatterns]

Heya! I was trying to not overload this part with unnecessary information, and I guess made it more confusing 😅 The process is like this: - compare objects, if the same - skip the tree entirely - if true - compare types. If the same, it confirms that element is the same, needs updating - re-render - if false - confirms that something changes radically, unmount the previous element, and mount a new one. There is also "key" that play a role here. I had an article and standalone video on reconciliation, it goes into more details about all of it. And there will be another video as part of this course (after the next one), that explains the whole process and the consequences. This is the article: www.developerway.com/posts/reconciliation-in-react

[@omarmohamed4814]

Hey, I'm new here and you are awesome.

[@omarmohamed4814]

One little concern!, whatever happens inside the app components the children passed as props won't be affected unless they rely on some props that triggers a rerender right?

[@developerwaypatterns]

Or they use some context or state from some global store like Redux that was updated. But local state won't affect them, yep.

[@TadStrange-cu5qh]

At 6:37, did you mean the comparison between "Before" and "After" when the state change, isn't it?

[@berkaycirak]

Thanks for your sharing. I have a question at 1:42. Since App component is re-rendered, we can reconcilate its children whether they need re-render or not. In that case, we import from outside the App component, therefore its reference will be the same in both situation (before render- after render). Why does re-render of that component not be skipped ? or when react encounters with , it creates component instance. In that case, each re-render will cause a new component instance for related child component since in re-render react will encounter with child component? Please clear my mind, I am confused about that

[@ashutoshsingh73]

This is exactly I am also confused about. Please explain Developer way.

[@gunasekarant6498]

Superb 😍 Doubt: What happen on Component passed as children to Context? ``` {children} ```

[@developerwaypatterns]

Same as if it was a normal component. But if a component passed as children uses this Context, it will re-render when the context value changes.

[@gunasekarant6498]

@@developerwaypatterns Thank you

[@lovikuanyshev]

Hello Nadia! Will React save reference for component as props if we will use it not like "" but props like a render function " } />" Will it work the same way?

[@developerwaypatterns]

This is "render props" pattern, it's covered in the next video. It will just works as a function that returns an Element that you call manually inside the SomeComponent

[@thebarnowlsmusic]

How did you stumble upon this technique ?

[@developerwaypatterns]

No idea, saw it somewhere a long time ago. I think pretty much everyone has written about it, it's even in the React docs: react.dev/learn/passing-props-to-a-component#passing-jsx-as-children

[@Engazan]

love your videos, but we need more cats

[@developerwaypatterns]

Totally agree! 😸

[@user-os8wy9js4i]

hey Nadia, really appreciate your work here and in the book. but I am bit confused at 7:18s (kzbin.info/www/bejne/iaCZoZ-qZbZ4la8) at React will compare "content" object, but afa I understand React should compare return object of the component which will be different in the example you shared. could you help me out here? thanks!

[@developerwaypatterns]

I'm not sure I understand the question 😞 there is no content object at this time, which example do you mean and why it will be different?

[@user-os8wy9js4i]

@@developerwaypatterns my mistake, I meant to refer 7:46, from what I understand return object of the component in which state is changed is compared so here it should be something like this: { type: "div", children: [, content]} which would be recreated on rerender...

[@developerwaypatterns]

Ah! That makes more sense. Yep, the returned object of the ScrollableWithMovingBlock component will be re-created when the state there changes. But the trick is - React will iterate over that tree of objects, including all of those children, and compare them with the object on the same position in the render tree before and after. In this case, it will be: 1. compare the root element - it's div, was re-created - mark it as "needs re-render" 2. iterate over div's children 2.a MovingBlock - same component type, but object is re-created - mark it as "needs re-render" 2.b "content" - this is also an element, but it came from props. It's not going to be recreated, it's just put in the object as-is. React will skip it The 5th video of this series goes through how all of this works in more detail, so it should help with understanding it on a deeper level

[@user-os8wy9js4i]

@@developerwaypatterns thank you for taking the time to explain, but I am still confused because I though all the children gets re-rendered if Parent object check returns false.

[@developerwaypatterns]

@@user-os8wy9js4i React checks every object in the tree, not just the original one. Children get re-rendered if their own check returns "false". And they won't re-render, if their check returns "true". This happens when a child is memoized, for example. Or if it's passed from props, as in the example here.

[@user-rk7dm1xm3r]

06:45 2 episod - mistake. should be return false - not true or I just do not understand this 2d episod at all. Explain please who can

[@developerwaypatterns]

No mistake. If the comparison of types returns "false", then it would mean that the element "before" is radically different to the element "after". The element "before" then would be removed from the structure and the element "after" added from scratch. I.e. "div" to "p" transition: div is removed, p is added. Div is unmounted, p is mounted. If the comparison returns "true", that mean that the element "before" and "after" is the same, just needs an update. I.e "div" to "div" transition - both before and after are divs, div just re-renders. Exactly the same if in "type" you have is a function. If it's the same function - proceed further, i.e. check props and/or "key", and re-render as a result.

[@user-rk7dm1xm3r]

@@developerwaypatterns OK. Make sense. No unmounts. Child components are the same. Parent state changed - react should rerender parent and all children components. It is simple for now. But there is exception for children components that came from prop 'children'. What is it the magic? I do not understand why if I create children components inside of parent or outside (doesn't matter) they will be rerendered but if they came to parent as a 'childen' prop they will not rerender ?

[@user-rk7dm1xm3r]

const Child = () => { return ( Child ); }; function Parent() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}> Увеличить ); } In that example Child rerenders on click regardless the fact that it was created outside the parent component. It is understandable.

[@user-rk7dm1xm3r]

const Child = () => { return ( Child ); }; const AncectorComponent= () => { return( )} - in one file In another file: function Parent({children}) { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}> Увеличить {children} ); } - why Child component is no rerendered on click?

[@developerwaypatterns]

Because the very first thing React checks is whether the Element changes. It starts with the shallow comparison, our normal "===". If the element "before" === element "after", it's a signal to React that the Element stays the same, and there is no need to re-render anything. Element, in your case, is the result of - the object with the "type": Child We'll typically have the same reference to this object "before" and "after" in two cases: * when it's memoized with useMemo const child = useMemo(() => , []) * when it's passed as props that's this case, "children" is just a regular prop

[@korkut31]

where is fiber tree ? u r describing wrong.

[@developerwaypatterns]

I'm not wrong, this is how React works. You can read about it for example in Dan Abramov's (member of React core team) very detailed article: overreacted.io/react-as-a-ui-runtime/

[@belkocik]

6:13 don't really understand why React re-render when the values are the same. Value didn't change so React shouldn't re-render 😂 The shallow comparison works that way if the values are the same it means that they are not the same values and React should re-render 😂?

[@developerwaypatterns]

Because it's not memoized :) React by default re-renders everything and doesn't compare props. It only compares them if the component is wrapped in React.memo - it's the video number 5

[@belkocik]

@@developerwaypatterns Thank you! Noted ☺️

[@nbkdespat]

That's not entirely accurate. React does perform a comparison of props and state to determine whether a component needs to re-render, but the type of comparison it performs depends on how the component is implemented and whether it's wrapped in certain optimizations like React.memo. Here's how it generally works: Default Behavior: By default, React performs a shallow comparison of props and state to determine whether a component should re-render. This means it compares the references (memory addresses) of the objects passed as props or stored in state. If the references are different (indicating that the objects have changed), React triggers a re-render. If the references are the same, React assumes that the data hasn't changed and skips the re-render. React.memo: React.memo is a higher-order component (HOC) provided by React that memoizes the result of a component rendering. When you wrap a component with React.memo, it performs a shallow comparison of the props passed to the component. If the props haven't changed (based on shallow comparison), React.memo prevents the component from re-rendering and returns the memoized result instead. This optimization can be useful for functional components that render the same output given the same props. So, to answer your question: By default, React does perform a comparison of props and state to determine whether a component should re-render. It uses a shallow comparison for this purpose. React.memo is a way to optimize functional components by preventing unnecessary re-renders based on props. It does this by comparing the props passed to the component. In summary, React compares props and state by default, but React.memo provides a way to optimize the re-rendering behavior by memoizing components based on their props.@@developerwaypatterns

[@developerwaypatterns]

​@@nbkdespat > Default Behavior: By default, React performs a shallow comparison of props and state to determine whether a component should re-render. This is just incorrect, sorry. By default, React re-renders all nested components. It performs shallow comparison only on components wrapped in memo HOC. What you're describing as "default" is how React deals with memoized components, not all components. This can easily be verified with code: just implement a component with the state that renders other components, and check their re-renders. You can re-watch the first video of this series, it has code examples and explanations. Here is one of those: codesandbox.io/p/sandbox/example1-initial-slow-component-tmqm4l?file=%2FApp.tsx When state changes in the App component, the VerySlowComponent re-renders.

[@coffeeandtalk]

i feel even more lost with this subject

[@developerwaypatterns]

Which part makes you struggle the most?

[@coffeeandtalk]

@@developerwaypatterns visualization. i have a very hard time visualizing rerenders and state changes and what changes and what not in like a slow motion step by step manner..this is confusing to me

[@korkut31]

u pronunce 'a' letter wrong. where did u learned english ?

[@mgrm7031]

In z mazer rasha of horse