Bagaimana Anda mencegah pembaruan status dari menyebabkan perender ulang yang berlebihan?

Question

Accepted Answer

Perubahan status memicu perender ulang, dan status yang terstruktur dengan buruk dapat menyebabkan **jauh lebih banyak perender ulang daripada yang diperlukan** — memperlambat aplikasi. Strategi kunci: berlangganan secara sempit, bagi status, memoize, dan jaga status tetap lokal. ## 1. Berlangganan ke iris minimum yang Anda perlukan ```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); ``` Langganan selektif (pemilih Zustand/Redux, atom Jotai) adalah tuas terbesar — komponen hanya merender ulang ketika iris spesifik mereka berubah, bukan pada setiap pembaruan toko. ## 2. Bagi status / konteks untuk membatasi radius ledakan ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoize komponen dan nilai ```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 mencegah anak-anak dari perender ulang ketika props mereka (dengan referensi) belum berubah — tetapi hanya berfungsi jika Anda juga menjaga props/callback tetap stabil secara referensial (karenanya `useCallback`/`useMemo`) dan memperbarui status **secara immutable**. ## 4. Jaga status selokal mungkin ```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. Jangan simpan nilai yang diturunkan; hindari referensi baru setiap render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Gunakan pemilih yang dimemoize untuk data turunan ```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 ``` ## Ukur terlebih dahulu ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Mengapa ini penting Perender ulang yang berlebihan adalah penyebab utama aplikasi React/berbasis status yang lambat, dan mereka berasal dari bagaimana status distruktur dan dilanggan. Toolkit — langganan selektif yang ketat, konteks terpisah, memoization dengan referensi stabil, pembaruan immutable, dan lokalisasi status — secara langsung mengontrol cakupan perender ulang. Yang penting, Anda harus **mengukur** (Profiler) untuk menemukan hambatan nyata sebelum mengoptimalkan, karena memoization yang ceroboh menambah kompleksitas tanpa manfaat. Memahami apa yang memicu perender ulang dan cara membatasinya sangat penting untuk aplikasi berskala besar yang berkinerja baik.