Back to articles
I've Been Slowing Down React for 3 Years. Here's What My Code Review Revealed.

I've Been Slowing Down React for 3 Years. Here's What My Code Review Revealed.

via Dev.to ReactDaniel Rusnok

I've been writing React for three years. I thought I understood memoization. Then a colleague reviewed my PR and pointed something out: I was wrapping almost every computed variable in useMemo . Not because I had profiled anything. Not because there was a performance problem. Just because — why not? It felt responsible. He was polite about it. But the message was clear: I was making React do more work, not less. That conversation sent me down a rabbit hole I should have gone down years ago. Here's what I found. The cost of memoization The idea behind useMemo is simple: cache the result of an expensive computation so React doesn't have to redo it on every render. const sortedList = useMemo (() => { return items . sort (( a , b ) => a . name . localeCompare ( b . name )); }, [ items ]); Instead of sorting on every render, React stores the result and only recalculates when items changes. Sounds like a no-brainer, right? Here's the part I was ignoring: useMemo itself has a cost. React stor

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles