Durum güncellemelerinin aşırı yeniden render edilmesine neden olmasını nasıl önlersiniz?

Question

Accepted Answer

Durum değişiklikleri yeniden render tetikler ve kötü yapılandırılmış durum **gerekenden çok daha fazla yeniden render** yapılmasına neden olabilir — uygulamayı yavaşlatır. Ana stratejiler: dar kapsamda abone ol, durumu böl, memoize et ve durumu yerel tut. ## 1. İhtiyacınız olan minimum slice'a abone olun ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Seçici abonelikler (Zustand/Redux selectors, Jotai atoms) tek en büyük avantajdır — bileşenler yalnızca kendi slice'ları değiştiğinde yeniden render edilir, her store güncellemesinde değil. ## 2. Durumu böl / context'i sınırlandır ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Bileşenleri ve değerleri memoize et ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memoization, props'lar (referans olarak) değişmediğinde child'ları yeniden render edilmekten korur — ancak bu sadece props/callbacks'leri referans olarak stabil tutarsanız ve durumu **immutable** şekilde güncellerseniz çalışır (bu nedenle `useCallback`/`useMemo`). ## 4. Durumu mümkün olduğunca yerel tut ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. Türetilmiş değerleri depolama; her render'da yeni referanslar oluşturma ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Türetilmiş veriler için memoized selectors kullan ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Önce ölç ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Neden önemli Aşırı yeniden render edilmeler, React/durum odaklı uygulamaların yavaşlamasının başlıca nedenidir ve durumun nasıl yapılandırıldığı ve abone olunduğundan kaynaklanır. Toolkit — dar kapsamlı seçici abonelikler, bölünmüş context'ler, stabil referanslarla memoization, immutable güncellemeler ve durumun yerelleştirilmesi — yeniden render scope'unu doğrudan kontrol eder. Önemlisi, optimize etmeden önce **ölçmeniz** (Profiler) gerekir çünkü gereksiz memoization hiçbir fayda sağlamadan karmaşıklık ekler. Yeniden render'ı neyin tetiklediğini ve bunu nasıl sınırlayacağınızı anlamak, büyük ölçekli uygulamalarda performans için gereklidir.