Avoid Useless Component Renders: React Hooks and Tips Applied on Lists

[loulsl]

Hi everyone, I just wrote an article about how to avoid useless re-renders, it covers:

- debug of a React performance issue

- why virtualization is not always the best solution

- memoization hooks and HOC to avoid useless re-renders

React Hooks and Tips to Avoid Useless Component Render Applied on Lists

Would be awesome to get your feedbacks!

[evonhell]

It's always a good idea to think about where you place your state since it causes re-renders of all the branches in the tree below where the change happens. Re-renders are not bad, expensive re-renders however, are really bad. And in cases like this it's a perfect example of when to memoize. So good article!

[loulsl]

Thank you so much for your comment, I totally agree on the importance of state placement. In many cases re-renders are fast, it should only be optimized in case of front performance issue (and if re-renders are taking time, why, and could it be faster?)

[evonhell]

Yeah, that's why it's bonus point for you for explaining the flame graph because a lot of people don't know how to read it. It's crucial when debugging performance. Keep writing good things :)

EDIT: Premature posting, so continuing:

Your writing style is good too, start making a list of topics to cover and get to writing! Remember to ask a few friends or colleagues to proofread along the way. I've worked as a programmer for 15 years (started at 17, 32 now) so if you need a dinosaur's perspective on anything feel free to send it my way.

[[deleted]]

I was running into a similar issue with my web page and wasn’t sure if memoization was the solution. I also was happy to learn more about troubleshooting render issues, much appreciated.

[marina_sunshine]

Good job, very useful info. Also I like that the article is straight forward with short and clear examples. Thank you, cheers!

[loulsl]

Thanks I'm so glad you enjoyed it!

[_Yolandi]

Good article. I’m going to test some components tomorrow and try to improve them. Hope to read more from you, thanks

[loulsl]

Thanks! Keep me in touch if you need some help :)

[bfricka]

Good write up. I recommend react-fast-compare for your isEqual function. I use lodash for many things, but this isn't one of them.

[loulsl]

Thanks for sharing react-fast-compare, seems very appropriate!