BRIEFS logo BRIEFS

Fixating on fixing rerenders

05/29/2021 , 2m, 57s

https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render https://kentcdodds.com/blog/colocation https://epicreact.dev/improve-the-performance-of-your-react-forms

Hello there friends. So today somebody shared a lightbri with me and I assumed 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 is the 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 you pass 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 slow render 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 fixing renders 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 look colocation 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 state collocation 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 layout components, 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 structure things 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 some people 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 of react 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,Is interesting and helpful have a nice day.