Najpierw zmierz, potem napraw rzeczywistą przyczynę — nie rozpylaj useMemo na zgadywankę.
Wykorzystaj React DevTools Profiler (włącz "Highlight updates when components render"). Pokazuje, które komponenty zostały przerenderowane i dlaczego (zmienily się props, zmienilo się state, rodzic się przerenderował, context się zmienił).
1. Nowe obiekty/tablice/funkcje jako props przy każdym renderowaniu pokonują React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Wartość context jest odtwarzana przy każdym renderowaniu → wszyscy konsumenci się przerenderowują. Zapamiętaj value lub podziel konteksty.
3. State umieszczony zbyt wysoko. Obniżenie state'u tak, aby mniej komponentów od niego zależało, jest często największą wygraną:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Droga praca w renderowaniu → zawiń w useMemo.
Renderowania są zwykle tanie — React jest szybki. Większość "optymalizacji" dodaje złożoność bez mierzalnych korzyści. Preferuj poprawki strukturalne (umieszczanie state'u, wirtualizacja list dla tysięcy wierszy) zamiast rozpylania memos. Optymalizuj konkretne punkty, które profiler ujawnił, i zmierz ponownie, aby potwierdzić, że naprawdę pomogła.