Pisanan ukur, banjur perbaiki sebab nyata — aja ngcecelake useMemo nang endi-endi amarga tebakan.
Gunakake React DevTools Profiler (aktivake "Highlight updates when components render"). Nampilake komponen mana sing re-render lan kenapa (props owah, state owah, parent ngrender, context owah).
1. Props obyek/array/fungsi anyar saben render kalahake 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. Nilai context diciptaake maneh saben render → kabeh konsumen re-render. Memo-ake value utawa pisaake konteks.
3. State dilebihake dhuwur. Nurunake state supaya komponen sing gumantung luwih sithik asring ngasil kemenangan paling gedhe:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Kerja mahal ing render → wrapped ing useMemo.
Re-render biasane murah — React iku cepet. Akeh-akehe "optimisasi" nambah kerumitan tanpa manfaat sing bisa diukur. Luwih seneng structural fixes (colocating state, virtualization list kanggo ribuan baris) tinimbang ngcecelake memos. Optimize hotspot khusus sing profiler wujudake, lan ukur maneh kanggo confirm perbaikan iki bener-bener membantu.