ਤੁਸੀਂ ਸਟੇਟ ਅਪਡੇਟਾਂ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਕਰਨ ਤੋਂ ਕਿਵੇਂ ਰੋਕਦੇ ਹੋ?

Question

Accepted Answer

ਸਟੇਟ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਨੂੰ ਟਰਿਗਰ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਖਰਾਬ-ਬਣਾਈ ਗਈ ਸਟੇਟ **ਜ਼ਰੂਰੀ ਨਾਲੋਂ ਕਿਤੇ ਵੱਧ ਦੁਬਾਰਾ-ਰੈਂਡਰਿੰਗ** ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੀ ਹੈ — ਐਪ ਨੂੰ ਸਸਤਾ ਕਰਦਾ ਹੈ। ਮੁੱਖ ਰਣਨੀਤੀਆਂ ਇਹ ਹਨ: ਘੱਟ ਸਬਸਕ੍ਰਾਈਬ ਕਰੋ, ਸਟੇਟ ਨੂੰ ਵੰਡੋ, memoize ਕਰੋ, ਅਤੇ ਸਟੇਟ ਨੂੰ ਸਥਾਨਕ ਰੱਖੋ। ## 1. ਤੁਹਾਨੂੰ ਜਿਸ ਘੱਟੋ-ਘੱਟ ਸਲਾਈਸ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਉਸ ਵਿੱਚ ਸਬਸਕ੍ਰਾਈਬ ਕਰੋ ```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); ``` Selective ਸਬਸਕ੍ਰਿਪਸ਼ਨਾਂ (Zustand/Redux selectors, Jotai atoms) ਸਭ ਤੋਂ ਵੱਡਾ ਲੀਵਰ ਹਨ — ਕੰਪੋਨੈਂਟ ਸਿਰਫ ਤਦ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਉਹਨਾਂ ਦੀ ਸਪੱਸ਼ਟ ਸਲਾਈਸ ਬਦਲਦੀ ਹੈ, ਹਰ ਸਟੋਰ ਅਪਡੇਟ ਤੇ ਨਹੀਂ। ## 2. ਸਟੇਟ ਨੂੰ ਵੰਡੋ / ਬਲਾਸਟ ਰੇਡੀਅਸ ਨੂੰ ਸੀਮਤ ਕਰਨ ਲਈ context ਵੰਡੋ ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. ਕੰਪੋਨੈਂਟਾਂ ਅਤੇ ਮੁੱਲਾਂ ਨੂੰ Memoize ਕਰੋ ```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 (ਸੰਦਰਭ ਦੁਆਰਾ) ਨਹੀਂ ਬਦਲੇ ਹਨ — ਪਰ ਇਹ ਸਿਰਫ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ props/callbacks ਨੂੰ referentially ਸਥਿਰ ਰੱਖਦੇ ਹੋ (ਇਸਲਈ `useCallback`/`useMemo`) ਅਤੇ ਸਟੇਟ ਨੂੰ **immutably** ਅਪਡੇਟ ਕਰਦੇ ਹੋ। ## 4. ਸਟੇਟ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਸਥਾਨਕ ਰੱਖੋ ```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. ਪ੍ਰਾਪਤ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਨਾ ਕਰੋ; ਹਰ ਰੈਂਡਰ ਤੇ ਨਵੇਂ ਸੰਦਰਭ ਤੋਂ ਬਚੋ ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. ਪ੍ਰਾਪਤ ਡੇਟਾ ਲਈ memoized selectors ਦੀ ਵਰਤੋਂ ਕਰੋ ```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 ``` ## ਪਹਿਲੇ ਮਾਪੋ ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## ਇਹ ਮਾਮਲਾ ਕਿਉਂ ਬਣਦਾ ਹੈ ਬਹੁਤ ਜ਼ਿਆਦਾ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਸਸਤੇ React/state-ਚਾਲਿਤ ਐਪਸ ਦਾ ਇੱਕ ਪ੍ਰਮੁੱਖ ਕਾਰਨ ਹਨ, ਅਤੇ ਉਹ ਇਸ ਤਰ੍ਹਾਂ ਆਉਂਦੇ ਹਨ ਕਿ ਸਟੇਟ ਕਿਵੇਂ ਬਣਾਈ ਗਈ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਸਬਸਕ੍ਰਾਈਬ ਕਿਵੇਂ ਹੈ। ਟੂਲਕਿਟ — narrow selective ਸਬਸਕ੍ਰਿਪਸ਼ਨਾਂ, ਵੰਡੇ ਗਏ contexts, stable ਸੰਦਰਭ ਦੇ ਨਾਲ memoization, immutable ਅਪਡੇਟਾਂ, ਅਤੇ ਸਟੇਟ ਨੂੰ ਸਥਾਨਕ ਕਰਨਾ — ਸਿੱਧੇ ਤੌਰ ਤੇ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਸਕੋਪ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦੇ ਹਨ। aham ਤੋਂ ਵੀ ਮਹੱਤਵਪੂਰਨ, ਤੁਹਾਨੂੰ **ਮਾਪਣਾ** ਚਾਹੀਦਾ ਹੈ (Profiler) ਅਪਟੀਮਾਈਜ਼ ਕਰਨ ਤੋਂ ਪਹਿਲੇ ਅਸਲ bottleneck ਨੂੰ ਲੱਭਣ ਲਈ, ਕਿਉਂਕਿ ਲਾਪਰਵਾਹ memoization ਲਾਭ ਦੇ ਬਿਨਾਂ ਜਟਿਲਤਾ ਜੋੜ ਦਿੰਦਾ ਹੈ। ਇਹ ਸਮਝਣਾ ਕਿ ਕੀ ਦੁਬਾਰਾ-ਰੈਂਡਰ ਨੂੰ ਟਰਿਗਰ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਰੋਕਣਾ ਹੈ ਵੱਡੇ-ਪੈਮਾਨੇ ਦੀਆਂ performant ਐਪਸ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।