Ensin mittaa, sitten korjaa todellinen syy — älä levitä useMemoa kaikkialle arvailun perusteella.
Käytä React DevTools Profileriä (ota käyttöön "Highlight updates when components render"). Se näyttää, mitkä komponentit renderöitiin uudelleen ja miksi (props muuttuivat, state muuttui, vanhempi renderöitiin, konteksti muuttui).
1. Uudet object/array/function props joka renderöinnissä voittavat React.memon:
// ❌ 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. Kontekstin arvo luodaan uudelleen joka renderöinnissä → kaikki kuluttajat renderöidään uudelleen. Muista value tai jaa kontekstit.
3. State sijoitettu liian korkealle. State-sijainnin laskeminen niin, että siihen riippuu vähemmän komponentteja, on usein suurin voitto:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Kallis työ renderöinnissä → kääri useMemoon.
Uudelleenrenderöinnit ovat yleensä halpoja — React on nopea. Useimmat "optimoinnit" lisäävät monimutkaisuutta ilman mitattavaa hyötyä. Suosi rakenteellisia korjauksia (tilan sijoittelua, listan virtualisointia tuhansille riveille) memo-hajottamisen sijaan. Optimoi profiler-paljastuvat erityiset kuumat pisteet ja mittaa uudelleen vahvistaaksesi, että korjaus todella auttoi.