Önce ölçün, sonra asıl nedeni düzeltin — tahmine dayanarak her yere useMemo koymayın.
React DevTools Profiler kullanın ("Highlight updates when components render" öğesini etkinleştirin). Hangi bileşenlerin yeniden render edildiğini ve neden olduğunu gösterir (props değişti, state değişti, parent render edildi, context değişti).
1. Her render'da yeni object/array/function props React.memo'yu yenebilir:
// ❌ 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. Her render'da Context value yeniden oluşturuldu → tüm tüketiciler yeniden render olur. value öğesini memoize edin veya context'leri bölün.
3. State çok yüksekte yerleştirildi. State'i düşürmek, daha az bileşen buna bağlı olacak şekilde, genellikle en büyük kazanç:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Render'da pahalı iş → useMemo ile sarmalayın.
Re-renders genellikle ucuz — React hızlı. Çoğu "optimizations" ölçülebilir bir fayda olmaksızın karmaşıklık ekler. Memos'u dağıtmak yerine yapısal düzeltmeleri (state colocation, binlerce satır için list virtualization) tercih edin. Profiler'ın ortaya çıkardığı belirli hotspot'ları optimize edin ve düzeltmenin gerçekten yardımcı olduğunu doğrulamak için yeniden ölçün.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap