Fixating on fixing rerenders - a podcast by Kent C. Dodds

from 2021-05-29T22:00:37

:: ::

https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
https://kentcdodds.com/blog/colocationhttps://epicreact.dev/improve-the-performance-of-your-react-forms
Hello there friends. So today somebody shared a lightbri with me and Iassumed that it was just a library to help you track rerenders. But it
turns out it's like a state management library and that helps you avoid
rerenders but my initial reaction and thought about tracking re-renders isthe tools like that.
I think lead people to jump directly to the natural and obvious solution,which is often not the best solution and I'm talking about memoization. So
when,If you're tracking rerenders and that's how you measure whether
something's faster or not you're gonna say, oh well this component didn't
need to rerender so therefore.I will apply the re-render hammer to solve this problem and that is react
memo. And then you have to use memo or use callback all the things that youpass to it. And that spiders in into the rest of your code base really
easily. And so what I recommend is I have a blog post called fix the slowrender before you fix the rerender and so you have to put a little bit more
thought into it, but you find out what part of you.Here rendering is slow because even if you fix the rerender at some point
you've got to render like there are necessary renders. And if those are
slow then that's not a great user experience either. And so if you can fix
that then maybe you'll be able to avoid needing to worry about rerenders.
But sometimes you just there's nothing that's slow in particular. It's just
a lot of things that add up to make the experience slower and so fixingrenders is kind of the the best approach for that. And when you're in that
situation, then I actually wrote.Another blog post called state lookcolocation can make your react apps faster and just recently wrote a blog
post that takes an angle on the like forms and how you can use statecollocation with forms and I'll link all of those at the top of this the
description this episode.But basically, I think that we can get a lot by using state co-location
also composability and composing our components, especially like layoutcomponents, so you don't have to pass.Props through all these other you
know app components And as with a combination of the way that you structurethings you often don't have to worry about unnecessary renders because they
just can't happen.
So anyway, the library itself was a state management tool and and somepeople get a kick out of that and that's great. That's awesome. I haven't
found myself needing to reach for many state management tools outside ofreact query and went with Remix. I don't really need a state management
tool.It's pretty awesome. But yeah, those are just some of the thoughts that I
had when I first saw the name of this librarian. So hope that,Isinteresting and helpful have a nice day.

Further episodes of 3 Minutes with Kent

Further podcasts by Kent C. Dodds

Website of Kent C. Dodds