Preventing React re-renders with composition

Поделиться
HTML-код
  • Опубликовано: 22 дек 2024

Комментарии • 143

  • @alifiasyalsabila3001
    @alifiasyalsabila3001 4 месяца назад +5

    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

  • @downtown_coffee
    @downtown_coffee Год назад +37

    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.

  • @melon5063
    @melon5063 Год назад +11

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

  • @jazzyBassBenny
    @jazzyBassBenny Месяц назад +1

    the content/explanation of the concepts should be on the site "thinking in react".
    honestly, this video lets me write my whole app new for performance reasons. great job!

  • @thierryrenematos
    @thierryrenematos Год назад +1

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

  • @SarShaGaming
    @SarShaGaming 11 месяцев назад +1

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

  • @0xlodz
    @0xlodz Год назад +6

    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.

  • @kdev_007
    @kdev_007 Год назад +1

    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.

  • @pranayahirwar
    @pranayahirwar 5 месяцев назад +2

    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.

  • @marouaniAymen
    @marouaniAymen Год назад +1

    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.

  • @syahrulanuar4521
    @syahrulanuar4521 Год назад +3

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

  • @janasheehan
    @janasheehan 9 месяцев назад

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

  • @alexodan
    @alexodan Год назад +1

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

  • @devware5609
    @devware5609 Год назад +1

    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

  • @toyurc
    @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🙏

  • @OmarGhostt
    @OmarGhostt 4 месяца назад

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

  • @js-wtf
    @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!!!

  • @zksumon847
    @zksumon847 Год назад +5

    Here after reading your blog.

  • @B-Amir
    @B-Amir Год назад +1

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

  • @Bukosaure
    @Bukosaure Год назад +2

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

  • @shivshankarshejwal6728
    @shivshankarshejwal6728 Год назад +1

    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

  • @21agdmnm
    @21agdmnm 6 месяцев назад

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

  • @martinnieva8484
    @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

  • @gaddp
    @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!

  • @lucasfariadev
    @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

  • @davidasiamah2898
    @davidasiamah2898 Год назад

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

  • @mleger45
    @mleger45 7 месяцев назад

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

  • @thebarnowlsmusic
    @thebarnowlsmusic Год назад

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

  • @gautamadhikari2590
    @gautamadhikari2590 Год назад

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

  • @matt112fly
    @matt112fly 4 месяца назад

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

  • @matthewbriggs9414
    @matthewbriggs9414 Год назад

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

  • @akashbhadouria6727
    @akashbhadouria6727 11 месяцев назад

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

  • @jegadheeswarank6290
    @jegadheeswarank6290 8 месяцев назад

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

  • @albertdugba
    @albertdugba Год назад +1

    Very educative. Keep them coming in

  • @PaweTkocz
    @PaweTkocz Год назад

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

  • @haallefs
    @haallefs 7 месяцев назад

    This content is pure gold

  • @dylpckl
    @dylpckl Год назад +1

    very clear and concise

  • @notcountdankula
    @notcountdankula 5 месяцев назад

    Wow. So grateful for this video. 🙏

  • @gmuthu20
    @gmuthu20 2 дня назад

    One clarification, for the last scenario still we can send the SlowComponents as children to the Layout component like {[ ]}.

  • @nicholaschu203
    @nicholaschu203 8 месяцев назад

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

  • @lqueryvg
    @lqueryvg 18 дней назад

    Excellent ! Brilliant explanation.

  • @dianaduran159
    @dianaduran159 6 месяцев назад

    You explain so well, love it 😅

  • @Javascriptallabout-ss9my
    @Javascriptallabout-ss9my Год назад

    Simple and very clear explanation 👌

  • @MundiWay
    @MundiWay 11 месяцев назад

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

  • @NosherwanGhazanfar
    @NosherwanGhazanfar Год назад

    Simple and informative performance patterns.

  • @alexandreagra239
    @alexandreagra239 6 месяцев назад

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

  • @sumeetprajapati15
    @sumeetprajapati15 Год назад +1

    Great video, very helpful. Thanks for sharing!

  • @MrEnsiferum77
    @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.

  • @SoulmatesLive
    @SoulmatesLive 3 месяца назад

    Thank you for this amazing video! 🙏🏻🙏🏻

  • @jasondilao6172
    @jasondilao6172 Год назад

    Thank you very much Nadia. Very insightful!!

  • @katsunoi
    @katsunoi Год назад

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

  • @amirdiafi
    @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.

  • @GokuHindustani
    @GokuHindustani 10 месяцев назад

    you are really underated creator

  • @kwaku_2023
    @kwaku_2023 7 месяцев назад

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

  • @mohanant7557
    @mohanant7557 Год назад

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

  • @JoyceLu-d9g
    @JoyceLu-d9g 8 месяцев назад

    Thanks so much!!! for your great explanation!

  • @ka5539
    @ka5539 7 месяцев назад

    This was very useful. Thank you!

  • @EnriqueMartinezInter
    @EnriqueMartinezInter Год назад

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

  • @gedas7529
    @gedas7529 Год назад

    Very well explained and concise thank you !!

  • @sarcasticdna
    @sarcasticdna Год назад +1

    Golden content

  • @丂卂丂乇匚卄丨卄卂
    @丂卂丂乇匚卄丨卄卂 16 дней назад +1

    thanks.. very informative

  • @TheCencoredGoat
    @TheCencoredGoat Год назад

    Packed full of valuable content ❤

  • @gabrielalvescunha9405
    @gabrielalvescunha9405 Год назад

    This is gold 🪙🪙🪙🥇

  • @trollflix
    @trollflix Год назад

    you are so amazing, this video helped me so much

  • @K.Huynh.
    @K.Huynh. 5 месяцев назад

    so cool, thank you for sharing!

  • @satejbidvai
    @satejbidvai Год назад

    Very very helpful! Thanks!

  • @mayurkukade8902
    @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.

  • @wanted70a
    @wanted70a Год назад +1

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

  • @yetishmayotgan_narsa
    @yetishmayotgan_narsa Месяц назад

    amazing explanation

  • @Ginold
    @Ginold Год назад +1

    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
      @developerwaypatterns  Год назад +2

      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
      @Antoshkiv1 11 месяцев назад

      @@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
      @developerwaypatterns  11 месяцев назад

      @@Antoshkiv1 Thank you! 😊

  • @aomafura3374
    @aomafura3374 Месяц назад

    Thanks! I had so much trouble with re-renders. Can you cover Form re-renders as well?

    • @developerwaypatterns
      @developerwaypatterns  Месяц назад

      Do you have anything specific in mind for this?

    • @aomafura3374
      @aomafura3374 Месяц назад

      @ I’m probably doing mu form wrong but basically the scenario is, every time I input in my input text field, the entire screen re-renders.
      My form is inside a Modal but idk if that matters.

    • @developerwaypatterns
      @developerwaypatterns  Месяц назад

      You just need to trace where you're changing the state - in forms it's no different from other components.

  • @haroongit
    @haroongit Месяц назад

    thanks u @developer way

  • @AlexStefan-vs2dj
    @AlexStefan-vs2dj Год назад +1

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

  • @PontusHultman
    @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
      @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

  • @igor5379
    @igor5379 Год назад +1

    brilliant!

  • @eddi3ms
    @eddi3ms Год назад

    great video. It really helped! Thank you

  • @alexandrbalashov7543
    @alexandrbalashov7543 Год назад

    Good job! Thanks to the author a lot!

  • @oscarmamani5996
    @oscarmamani5996 23 дня назад

    Amazing video 🎉

  • @ivanslepchenko9785
    @ivanslepchenko9785 Год назад

    Thanks! This is awesome!

  • @skchintu6172
    @skchintu6172 6 месяцев назад

    wonder full tutorial mam, i loved your explanation 💌

  • @Ratelchief
    @Ratelchief Год назад

    this is brilliant!

  • @michaelscofield2469
    @michaelscofield2469 Год назад

    omg

  • @haroongit
    @haroongit Месяц назад

    omg its amazing a diamond video thank u thank u thank u

  • @elik3765
    @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
      @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 🤔

  • @mrstudioguitar2808
    @mrstudioguitar2808 Год назад

    Great video! Thanks!

  • @aissanadjemeddine1330
    @aissanadjemeddine1330 Год назад

    Thanks ❤❤❤

  • @hmatpin
    @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

  • @Piyush-gt3wf
    @Piyush-gt3wf Год назад

    Wow, you're amazing!

  • @shahryartavakkoli
    @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
      @developerwaypatterns  Год назад +1

      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
      @shahryartavakkoli Год назад

      @@developerwaypatterns 🌹♥

  • @NoudvD63
    @NoudvD63 Год назад

    Great! Very useful info.

  • @MisterPitou
    @MisterPitou 10 месяцев назад

    very nice, thank you

  • @runner4digits
    @runner4digits 9 месяцев назад

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

  • @danilocecilia7831
    @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
      @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

  • @gibber1sh-c6w
    @gibber1sh-c6w Год назад

    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
      @developerwaypatterns  Год назад +2

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

    • @habalgarmin
      @habalgarmin Год назад

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

  • @ivaylopetrov9956
    @ivaylopetrov9956 Год назад

    Great job

  • @talatkuyuk6556
    @talatkuyuk6556 4 месяца назад

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

  • @sushantrajbanshi4508
    @sushantrajbanshi4508 Год назад +1

    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
      @developerwaypatterns  Год назад +1

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

    • @sushantrajbanshi4508
      @sushantrajbanshi4508 Год назад +1

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

  • @morchellemusic2829
    @morchellemusic2829 11 месяцев назад

    thanks Nadia

  • @KO-lm6wh
    @KO-lm6wh Год назад

    keep up your work

  • @salmon.hanif9000
    @salmon.hanif9000 9 месяцев назад

    Awesome video