State updates அதிகப்படியான re-renders-ஐ ஏற்படுத்துவதை எப்படி தடுப்பீர்கள்?

Question

Accepted Answer

State மாற்றங்கள் re-renders-ஐ trigger செய்கின்றன, மேலும் மோசமாக கட்டமைக்கப்பட்ட state **தேவைக்கு அதிகமான re-rendering**-ஐ ஏற்படுத்தலாம் — app-ஐ மெதுவாக்குகிறது. முக்கிய உத்திகள்: குறுகலாக subscribe செய்தல், state-ஐ பிரித்தல், memoize செய்தல், மற்றும் state-ஐ local-ஆக வைத்திருத்தல். ## 1. உங்களுக்குத் தேவையான குறைந்தபட்ச slice-க்கு subscribe செய்யுங்கள் ```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 subscriptions (Zustand/Redux selectors, Jotai atoms) என்பது ஒரே மிகப்பெரிய lever — components தங்கள் குறிப்பிட்ட slice மாறும்போது மட்டுமே re-render செய்கின்றன, ஒவ்வொரு store update-இலும் அல்ல. ## 2. Blast radius-ஐ கட்டுப்படுத்த state / context-ஐ பிரியுங்கள் ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Components மற்றும் values-ஐ 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 children-ஐ அவற்றின் props (reference அடிப்படையில்) மாறாதபோது re-render செய்வதிலிருந்து தடுக்கிறது — ஆனால் நீங்கள் props/callbacks-ஐ referentially stable-ஆகவும் (எனவே `useCallback`/`useMemo`) மற்றும் state-ஐ **immutably** update செய்தால் மட்டுமே இது வேலை செய்யும். ## 4. State-ஐ முடிந்தவரை local-ஆக வைத்திருங்கள் ```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. Derived values-ஐ store செய்ய வேண்டாம்; ஒவ்வொரு render-இலும் புதிய references-ஐ தவிர்க்கவும் ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Derived data-க்கு 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. ``` ## இது ஏன் முக்கியம் அதிகப்படியான re-renders மந்தமான React/state-driven apps-க்கு ஒரு முக்கிய காரணம், மேலும் அவை state எவ்வாறு கட்டமைக்கப்பட்டு subscribe செய்யப்படுகிறது என்பதிலிருந்து உருவாகின்றன. Toolkit — குறுகிய selective subscriptions, பிரிக்கப்பட்ட contexts, stable references-உடன் memoization, immutable updates, மற்றும் state-ஐ localize செய்தல் — re-render scope-ஐ நேரடியாக கட்டுப்படுத்துகிறது. மிக முக்கியமாக, optimize செய்வதற்கு முன் உண்மையான bottleneck-ஐ கண்டறிய நீங்கள் **அளவிட** வேண்டும் (Profiler), ஏனெனில் கவனக்குறைவான memoization நன்மை இல்லாமல் சிக்கலைச் சேர்க்கிறது. re-renders-ஐ எது trigger செய்கிறது மற்றும் அவற்றை எவ்வாறு கட்டுப்படுத்துவது என்பதைப் புரிந்துகொள்வது performant large-scale apps-க்கு அத்தியாவசியம்.