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.

I read your book, and I truly thank you. Your expertise is incredible. Thanks for sharing all that knowledge.

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.

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!!

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

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

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

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.

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.

Here after reading your blog.

hey nadia, thanks for creating this video.. very straight forward and understandable !

I really really like your explanation, the time you have put in to make these videos and the cat sticker, it's really cute specially the cat with crown. Wishing you success in getting what you desire.

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

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

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

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

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

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

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

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

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

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

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

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

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

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!!!

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!

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

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

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

Very educative. Keep them coming in

You explain so well, love it 😅

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

Wow. So grateful for this video. 🙏

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

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

Simple and informative performance patterns.

This was very useful. Thank you!

Great video, very helpful. Thanks for sharing!

Nice video, I actually wonder how you make this video with which tools?

you are really underated creator

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

wonder full tutorial mam, i loved your explanation 💌

very clear and concise

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

Thanks so much!!! for your great explanation!

Simple and very clear explanation 👌

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

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

so cool, thank you for sharing!

Thank you very much Nadia. Very insightful!!

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

Very well explained and concise thank you !!

Very very helpful! Thanks!

Preventing React re-renders with composition 1. Moving state down 1:48 2. Components as children props 4:37 3. Components as props 7:58

Golden content

Great video! Thanks!

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

great content please make more videos

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.

This content is pure gold

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

brilliant!

Packed full of valuable content ❤

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?

Great content! Thanks

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?

Wow, you're amazing!

great video :)

Good job! Thanks to the author a lot!

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.

great content! thanks

you are so amazing, this video helped me so much

great video. It really helped! Thank you

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 💛

Great! Very useful info.

very nice, thank you

This is gold 🪙🪙🪙🥇

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

Amazing stuff..

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

Thanks! This is awesome!

omg

Thx a lot!

thanks Nadia

awesome video, thanks for the advice to avoid caveats

keep up your work

Great job

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?

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 && }

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

Thanks ❤❤❤

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

this is brilliant!

Helpful

Interesting content

Awesome video

wtf great content!!! keep it up

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?

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).