Pertama ukur, kemudian perbaiki penyebab sebenarnya — jangan sebarkan useMemo di mana-mana berdasarkan tebakan.
Gunakan React DevTools Profiler (aktifkan "Highlight updates when components render"). Ini menunjukkan komponen mana yang di-render ulang dan mengapa (props berubah, state berubah, parent di-render ulang, context berubah).
1. Props object/array/function baru di setiap render mengalahkan 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 dibuat ulang di setiap render → semua consumer di-render ulang. Memoize value atau pisahkan contexts.
3. State ditempatkan terlalu tinggi. Menurunkan state sehingga lebih sedikit komponen bergantung padanya sering kali adalah kemenangan terbesar:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Pekerjaan mahal dalam render → bungkus dalam useMemo.
Re-render biasanya murah — React cepat. Sebagian besar "optimasi" menambah kompleksitas tanpa manfaat terukur. Lebih suka perbaikan struktural (melokalisasi state, list virtualization untuk ribuan baris) daripada menyebarkan memos. Optimalkan hotspot spesifik yang diungkapkan profiler, dan ukur ulang untuk mengkonfirmasi perbaikan benar-benar membantu.