Najprej izmerite, nato popravite pravo vzrok — ne razmetavajte useMemo naokrog po ugibanju.
Uporabite React DevTools Profiler (omogočite "Highlight updates when components render"). Prikazuje, katere komponente so bile ponovno prikazane in zakaj (props se je spremenil, state se je spremenil, starš je bil ponovno prikazan, context se je spremenil).
1. Novi objekti/nizi/funkcije props pri vsakem prikazu premagajo 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. Vrednost context je znova ustvarjena pri vsakem prikazu → vsi potrošniki se ponovno prikažejo. Memorizirajte value ali razdelite kontekste.
3. State postavljen preslabo. Znižanje state tako, da je od njega odvisnih manj komponent, je pogosto največja prednost:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Drago delo pri prikazu → zavijte v useMemo.
Ponovna prikazovanja so navadno poceni — React je hiter. Večina "optimizacij" doda zapletenost brez merljive koristi. Raje izberite strukturne popravke (umestitev state, virtualizacija seznama za tisočine vrstic) namesto razmetavanja memos. Optimalizirajte specifične vroče točke, ki jih razkrije profiler, in ponovno izmerite, da potrdite, da je popravek resnično pomagal.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj