Preventing React re-renders with composition

👉 Advanced React Book: www.advanced-react.com
👉 Comprehensive guide on React re-renders (www.developerway.com/posts/re...)
👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/ho...)
👉 The mystery of React Element, children, parents and re-renders (www.developerway.com/posts/re...)
💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia
Looking into how re-renders of React components can be prevented with the help of three composition patterns.
#react #reactjs #webdevelopment #programming #frontend

[@downtown_coffee]

Nadia you're an underrated content creator! You break down concepts clearly both on your blog and here. Am going to dive deeper into all your other articles.

[@developerwaypatterns]

Thank you, so nice to hear 😊

[@melon5063]

I never write comments, but this one deserves huge credit for great explanation

[@zksumon847]

Here after reading your blog.

[@21agdmnm]

Bought your book after watching some of your videos, you explain so well!

[@0xlodz]

Great perf patterns! I will now think about "Isolate state changes" when adding state to a component! It helps to use more composition and test components more easily.

[@gautamadhikari2590]

I just discovered this channel and the content quality is so good. Love your videos :)

[@matthewbriggs9414]

Cheers! Really helpful to have these fundamental patterns explained in one place and so concisely.

[@Bukosaure]

Love your way of teaching. Very clear and organized. And sweet animations!

[@B-Amir]

I'm really enjoying your React tutorials! Your explanations are clear and concise, and I'm learning a lot.

[@toyurc]

Watching these videos after reading those long blog posts cements many of the ideas Nadia always talks about. Thank you so much for sharing🙏

[@thebarnowlsmusic]

Valuable gems, thanks for putting this video and your articles together. Learned some valuable info.

[@gedas7529]

Very well explained and concise thank you !!

[@gaddp]

oh wow, this video is pretty new. explained beautifully and clearly as well. made me re-think everything I have done so far. thank you so much!

[@jasondilao6172]

Thank you very much Nadia. Very insightful!!

[@shivshankarshejwal6728]

Absolutely loved the presentation and example. We know these but using this on the fly and for keeping these concepts in mind , such examples really help. Thanks

[@thierryrenematos8203]

omg, your videos about react are so didactic that they took away my anxiety of not being able to deal with performance problems, thank you!!

[@developerwaypatterns]

thank you, that's so nice to hear! 😊

[@dylpckl]

very clear and concise

[@janasheehan]

talk about boiling things down and getting to the point. thank you for this. amazing.

[@katsunoi]

this is a great video - useful, practical, and well-explained

[@sumeetprajapati15]

Great video, very helpful. Thanks for sharing!

[@NosherwanGhazanfar]

Simple and informative performance patterns.

[@PaweTkocz]

Great video, just keep going. Your material are great source of knowledge both YT and Your website.

[@albertdugba]

Very educative. Keep them coming in

[@SarShaGaming]

This is probably the best video about why and how composition reduce re-renders. great stuff!

[@syahrulanuar4521]

Enjoying these new patterns of writing. A lot better than other KZbinrs out there suggesting to just 'deal' with the re-renders... Thanks so much for these! 🤙🏾🤙🏾🙏🏽🙏🏽

[@nicholaschu203]

Love your content! Very clear presentation and absolutely amazing! Thank you for your sharing!

[@EnriqueMartinezInter]

This is just what I needed, thank you so much!!

[@Javascriptallabout-ss9my]

Simple and very clear explanation 👌

[@mleger45]

this content is gold! thanks for such a great detailed explanation on how to properly handle states!

[@martinnieva8484]

Thank you VERY much Nadia Makarevich, I was missing some fundamentals on this and your article (and maybe this video is as useful) helped a LOT. It was so clear. Maybe I should have read the official docs from the very beginning I started using React hahaha

[@jegadheeswarank6290]

Great explanation!. You earned a subscriber. I hope your channel experiences steady growth

[@alexodan]

this series are making me realize I've been writing some terrible things lol, nice work keep it up!! 🙌

[@satejbidvai]

Very very helpful! Thanks!

[@hidden_monster007]

last week I discovered your blogs and now the vids. Amazing stuffs. I'm building a crypto exchange UI with React and your blogs are helping me a lot. Thank you very much. Keep sharing knowledge.

[@mrstudioguitar2808]

Great video! Thanks!

[@user-cc2fc4wy7q]

Thanks so much!!! for your great explanation!

[@LucasFariaDev]

Nadia, your content is incredible and I'm glad I found you! I already bought your book and have been enjoying it a lot. Love the way you teach, please keep it up

[@developerwaypatterns]

Thank you! 😊

[@TheInfamousAlpha]

Packed full of valuable content ❤

[@eddi3ms]

great video. It really helped! Thank you

[@ka5539]

This was very useful. Thank you!

[@js-wtf]

Your content is a treasure, I have read again and again and again your blog, and I have learned a crazy amount of stubs. Thanks a lot!!!

[@developerwaypatterns]

Thank you, glad the blog was useful! 😊

[@marouaniAymen]

Thanks for the video, I encountered the first problem with modal (your first example) in a real world project with Material UI modals. The modal component accepts a prop "open" to show it, at first I saw that with a naive approach (useState + modal inside the parent) I'll trigger a re-render on the parent, so first solution, I opted to useRef + forwardRef and I extracted modals as reusable components, then I used a Redux store to save a key+open and dispatch an open/close modal action from the parent with the modal id as key, the modal will have its own id as key and a call to useSelector to see if it's open or not. In fact, extracting as shown in your video was not a solution to make the parent component easy to read.

[@NoudvD63]

Great! Very useful info.

[@davidasiamah2898]

This was quite enlightening as it was refreshing. I think I've leveled up my React Skills in this video. I just subscribed.

[@developerwaypatterns]

Awesome to hear! 😊

[@dianaduran159]

You explain so well, love it 😅

[@ivanslepchenko9785]

Thanks! This is awesome!

[@trollflix]

you are so amazing, this video helped me so much

[@MundiWay]

WOw, best way to explain with editing, Keep going on.

[@nachowolf4471]

Great content! Thanks

[@mohanant7557]

Please provide more videos in any topic on react 🙂Your content is awesome and practical

[@alexandrbalashov7543]

Good job! Thanks to the author a lot!

[@igor5379]

brilliant!

[@haallefs]

This content is pure gold

[@devware5609]

Wow amazing explanation, I'm going to use this good practice from now on, just to mention all the content I have found out there just tells you to use Memoization but you track the main problem and offer the best solution, Thanks for it and Greetings from Mexico

[@developerwaypatterns]

Glad you liked it! 😊

[@Ratelchief]

this is brilliant!

[@akashbhadouria6727]

wow, you are awesome. One of the best content creators, God gifted explanation skills.

[@jguix]

great content! thanks

[@Piyush-gt3wf]

Wow, you're amazing!

[@kwaku_2023]

Awesome 🎉 this is super crazy and valuable at the same!!

[@MisterPitou]

very nice, thank you

[@4BeerLife]

Thx a lot!

[@ivaylopetrov9956]

Great job

[@alexandreagra239]

This is very amazing. Thank you so much, big W !!!

[@sarcasticdna]

Golden content

[@darindaxd]

Amazing stuff..

[@mayurkukade8902]

Thanks for creating such a great video .. From your article, I came here.. Could you please include a separate tab for react hooks in your article .. This would be very helpful to me and other developers.

[@aissanadjemeddine1330]

Thanks ❤❤❤

[@michaelscofield2469]

omg

[@KO-lm6wh]

keep up your work

[@GokuHindustani]

you are really underated creator

[@nallaparajuamareshvarma8471]

great content please make more videos

[@amirdiafi]

Thanks, Also we can work in such an MVVM architecture and manage the states on the presenter/controller and consume it in variant components.

[@KevinThoriya-bd7ym]

I love the content, this is uniqe, this is what I am looking for, when I search about performance in react. I would to see more of your videos about how useMemo and useCallback helps us. one small request, can you please make a video on how bad formik is, in performance when you are working with big forms. if you want more details on this, then i am happy to provide my struggles on it. Thanks You man.

[@filipecolaquecez9053]

great video :)

[@salmon.hanif9000]

Awesome video

[@morchellemusic2829]

thanks Nadia

[@skchintu6172]

wonder full tutorial mam, i loved your explanation 💌

[@gabrielalvescunha9405]

This is gold 🪙🪙🪙🥇

[@market_kombat]

Interesting content

[@user-lw6jt1nt4k]

awesome video, thanks for the advice to avoid caveats

[@runner4digits]

видео просто супер Спасибо 💌

[@AlexStefan-vs2dj]

Thank you so much for explaining these concepts, one question though: passing many components as props at multiple levels wouldn't make it look terrible at the top level? Like some pyramid of code that mabey makes you scroll-x in your code editor to fully see?

[@developerwaypatterns]

It might! 🙂 No silver bullet for anything. Those are just techniques that are useful for certain cases, but over-use of them might result in unreadable code that doesn't make sense

[@anaalmeida2327]

wtf great content!!! keep it up

[@danilocecilia7831]

Loved this video! I didn't know props didn't affect changes on the state, thanks so much for going through all possible scenarios we can use in order to avoid unnecessary re-render! Can you also explain on the case where I can useSelector for example: const { trainingMode } = useSelector((state) => state); const { checkedIn } = useSelector((state) => state.checkin); Is there any implications on using only state or state.somethingElse when it comes to re-render?

[@developerwaypatterns]

`useSelector` I assume is something like `reselect` library? Of normal state or React Context it won't matter, re-renders will be triggered at the fact that the state/Context value changes. If you're using Redux or other library, I would need to double check how it behaves, depends on the library

[@kashmirtechtv2948]

Great

[@hmatpin]

How would you go about preventing rerenders in list generated with Array.map? If the list is passed as a children prop, you end up in a scenario where a prop depends on another prop, ie, , and you can't pass props to props.children in the render code. Nice videos. Thanks

[@wanted70a]

Great work and thx! One questio if I may? Example with scroll tracking? Is that compontent usefull? How would we fire a callback or some logic without re-render? Updating the state in the wrapper is not usefull for itself, ins't it?

[@developerwaypatterns]

That really depends on what you want to do with that logic, hard to answer without seeing a real-life usecase or code. There are multiple options here, like throttling or exposing that state through render props (if some external component needs access to it without being re-rendered)

[@sushantrajbanshi4508]

Is there any optimization difference between Component as a children and Component as a prop pattern ? I found both of them to be quite similar in terms of efficiency, as in both the cases the children or the props don't get re-rendered on state updates ? Lovely video BTW 💛

[@developerwaypatterns]

No difference that I know of, children are props, just have nicer jsx "nesting" syntax :)

[@sushantrajbanshi4508]

@@developerwaypatterns That's what I thought too :)

[@user-jg6vc6po6b]

❤

[@PontusHultman]

Great video! How would you go about the ButtonWithDialog example if the component had a datagrid in it, and when clicking an item we want to open up the by passing an id. Then it feels like we need to have [id, setId] inside of the component which forces it to rerender? const Component = () => { const [id, setId] = useState(0) const [open, setOpen] = useState(false) const handleItemClick = (id: number) => ( setId(id) setOpen(true) } return ( {open && }

[@developerwaypatterns]

Yeah, in this case Datagrid will re-render. If it's something you need to prevent, you'd have to either go with React.memo for it, or pass that id through Context/any state management solutions you use

[@shahryartavakkoli]

Thank you, I have a question, how can find our components are re-rendered or not? Create a useEffect on them without second entry? What is your way to test and debug when you have no request to an API

[@developerwaypatterns]

This will work. Also, just console.log in render function will be good for it most of the time. And a lot of people like this tool for this: github.com/welldone-software/why-did-you-render

[@shahryartavakkoli]

@@developerwaypatterns 🌹♥

[@elik3765]

ragarding the last example with column and content. What would you say if Layout still wraps children, and and inside the Layout they are accessed via array destructuring, const [column, content] = children, and then used at appropriate places? I don't see any benefits over 'components as chidren', just wandering if that could be an alternative

[@developerwaypatterns]

For me, that would be confusing - I would understand what the intention is I'd say, but it would take a few seconds from my mental capacity to figure it out. So I'd rather go with some more "traditional" approach. From performance/re-renders perspective it doesn't look like it would bring any benefit either 🤔

[@MrEnsiferum77]

I've jump to codebase that written the code like that at 10:50, and the code is mess and re-rendering like crazy... there is not good way to stop re-rendering in react, unless to slowly started switching to solidjs.

[@panosjapan7]

How do you track which components re-render? I'm a newbie and what I would think to do is add a console.log to every file, to see if it's re-rendered (which, I'm sure, is not the best way to do it).

[@developerwaypatterns]

You can also use tools like "why-did-you-render": github.com/welldone-software/why-did-you-render

[@habalgarmin]

@@developerwaypatterns хороший инструмент, сам им пользуюсь.

[@Ginold]

I dont get it, you say that if state changes within a component it will make it re-render completely, but then at 7:00 you say that if state changes children are not affected because they are just props, but they should be re-rendered as a whole because of the state change, no?

[@developerwaypatterns]

Nope, that's the beauty of passing components as children! If you think of the components as a tree, then when state change triggers a re-render, it will be propagated "down" the tree, not up. And if you pass components as props, they will be "above" in that tree, so they will not be affected.

[@Antoshkiv1]

@@developerwaypatterns Thanks for this answer! I was struggling with this as well and just cant get why it is works like that. By the way I bought your books and it is amazing! Thanks a lot for such great and structured content and for the videos as well!

[@developerwaypatterns]

@@Antoshkiv1 Thank you! 😊

[@sarcasticdna]

One suggestion please try to use dark themes in your video

[@h3nry_t122]

at around 6:50 I found it really hard to understand. so components in the RETURN statement is not the same as {children} ? so there is a differentiation? "children are just props" just isn't really a comfortable reason to justify them not re-rendering. they are still components? I tried reading your blog posts too but I'm still struggling to understand your explanations. this is the explanation: “children” is a element that is created in SomeOutsideComponent. When MovingComponent re-renders because of its state change, its props stay the same. Therefore any Element (i.e. definition object) that comes from props won’t be re-created, and therefore re-renders of those components won’t happen. how does the props "staying the same" explain the children not re-rendering. I thought props changing does not cause re-renders anyways. overall I really like your content but my brain is just finding it such a hard time to understand it.

[@developerwaypatterns]

It really is just a matter where the Element is created and where the state is triggered. When we pass elements as props to a component with state, those elements are created in the parent components. Something like this: ``` const App = ({ elemAsProp }) => { const [state, setState] = useState(); // elemAsProp content won't re-render because of setState return {elemAsProp} } ``` Whatever is passed in `elemAsProp` won't be affected by the state change from `setState` in the `App` - they are higher in the components hierarchy. And when you pass components as `children` - it's exactly the same, they are just props in this case. If, however, you create an Element inside the `App`, when state change is triggered and `App` re-renders, every Element declared inside will be re-rendered as well: ``` const App = () => { const [state, setState] = useState(); // this one will re-render when setState is triggered const elemInside = return {elemInside} } ``` It's described in more details here: www.developerway.com/posts/react-elements-children-parents

[@user-kt7uk9cq7c]

sir, you are madam??