Piye carane njaga supaya update state ora nyebabake re-render sing kerja keras?

Question

Accepted Answer

Perubahan state ngaktifake re-render, lan state kang ora rapi bisa nyebabake **re-render sing akeh banget metu ora perlu** — nyarangi aplikasi jadi adem. Strategi kunci: subscribe kanthi selektif, pecah state, memoize, lan nyimpen state lokal. ## 1. Subscribe menyang pisan potongan minimal sing kowe butuh ```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); ``` Subscribe selektif (selectors Zustand/Redux, atoms Jotai) minangka pamburi paling gedhe — komponen mung re-render manawa saka slice spesifike berubah, ora saben update store. ## 2. Pecah state / context kanggo matesi 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 lan 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 ngedalaken anak-anakan saka re-render manawa props (dening referensi) ora owah — nanging iku cuma gumana yen kowe uga nyimpen props/callbacks stabil referensially (mula `useCallback`/`useMemo`) lan update state **immutably**. ## 4. Nyimpen state minangka lokal asring bisa ```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. Aja simpen nilai derived; liwati referensi anyar saben render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Gunakake memoized selectors kanggo data derived ```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 dhisik ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Pranyatan penting iki Re-render berlebihan minangka panyebab ngarep saka aplikasi React/state-driven sing adem, lan mula saka carane state rapi lan dilanggani. Toolkit — subscribe selektif sing sempit, pecah contexts, memoization kanthi referensi stabil, updates immutable, lan localize state — langsung ngontrol scope re-render. Sang penting, kowe kudu **ukur** (Profiler) kanggo cari bottleneck asli sadurunge optimize, amarga memoization sing ora eling nambah kerumitan tanpa alok. Ngerti apa kanggo nyebabake re-render lan carane ngemot iku penting banget kanggo aplikasi skala gedhe kang cepet.