Spoiler alert: this is a rant that might turn into something useful. Maybe.
My React journey has been a constant learning experience, but there’s something about React that has been bugging me lately.
Ever since I changed company last year, I found myself in a new codebase, and with it came something I never saw before: an odd quantity of useCallback in every single component of the app.
I have to admit I was responsible for most of a medium/big react app at my previous company and it always ran smoothly even without this heavy optimization. Of course, thanks to my beloved impostor syndrome I immediately thought “Oh god, I’m a terrible developer, I don’t know React, I never use memoization”. You know, the usual.
Since I was not familiar with the concept of useCallback, useMemo (and lodash
memoize!) I immediately documented myself, but all I could find were articles and tutorials about how to use these hooks and functions, and none of them touched deeply on the dependency array, which is something I constantly screw up!
Lately, I’ve been reading a lot on the use of
useMemo in a React app (useful links at the end of the post ✏️) because I wasn’t comfortable with my fake it ‘till you make it approach to this part of the framework and what I read was… well, more confusing than ever.
Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost.
Therefore, optimize responsibly.
Kent C. Dodds
Pretty much every article I read said something along the lines of "it’s wrong to optimize before profiling the application and every optimization comes with a cost that can easily outweigh the benefit".
In all the articles and comments on Stack Overflow, I could find, pretty much everyone agreed that there are cases where it’s pretty clear that memoization help:
- Big, very big lists
- Passing down components to optimized children
- Referential equality checks in hooks dependencies
- Computationally expensive functions (we’re talking prime numbers calculations!)
I’ll stop here, for now. My goal is to keep digging into this argument and try to profile the application I maintain at work and come up with definitive data on which components actually benefit from memoization and which are actually slower thanks to it.
📚 As promised, I’ll leave here the list of articles I read on the subject: