Ukur dahulu, kemudian baiki punca sebenar — jangan taburkan useMemo di merata-rata berdasarkan tekaan.
Gunakan React DevTools Profiler (dayakan "Highlight updates when components render"). Ia menunjukkan komponen mana yang di-render semula dan mengapa (props berubah, state berubah, induk di-render, context berubah).
1. Props objek/array/fungsi baharu pada setiap render menggagalkan 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 dicipta semula pada setiap render → semua pengguna (consumers) di-render semula. Memoize value atau pecahkan context.
3. State diletakkan terlalu tinggi. Menurunkan state supaya lebih sedikit komponen bergantung kepadanya selalunya kemenangan terbesar:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Kerja mahal dalam render → balut dalam useMemo.
Render semula biasanya murah — React adalah pantas. Kebanyakan "pengoptimuman" menambah kerumitan tanpa manfaat yang boleh diukur. Utamakan penyelesaian berstruktur (mengkolokasi state, virtualisasi senarai untuk beribu-ribu baris) berbanding menaburkan memo. Optimumkan titik panas (hotspots) khusus yang didedahkan oleh profiler, dan ukur semula untuk mengesahkan bahawa pembaikan itu benar-benar membantu.