আপনি কীভাবে স্টেট আপডেট থেকে অত্যধিক পুনর্নির্মাণ হওয়া প্রতিরোধ করেন?

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); ``` নির্বাচনী সাবস্ক্রিপশন (Zustand/Redux selectors, Jotai atoms) একক বৃহত্তম লিভার — কম্পোনেন্টগুলি শুধুমাত্র তাদের নির্দিষ্ট স্লাইস পরিবর্তনের সময় পুনর্নির্মাণ করা হয়, প্রতিটি store আপডেটে নয়। ## 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 রেফারেনশিয়ালি স্থিতিশীল রাখেন (`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. ``` ## কেন এটি গুরুত্বপূর্ণ অত্যধিক পুনর্নির্মাণ হল sluggish React/state-driven অ্যাপের একটি প্রধান কারণ, এবং এগুলি স্টেট কীভাবে সংগঠিত এবং সাবস্ক্রাইব করা হয় তা থেকে উদ্ভূত হয়। টুলকিট — সংকীর্ণ নির্বাচনী সাবস্ক্রিপশন, বিভক্ত contexts, স্থিতিশীল রেফারেন্স সহ memoization, immutable আপডেট, এবং স্টেট স্থানীয়করণ — সরাসরি পুনর্নির্মাণ সুযোগ নিয়ন্ত্রণ করে। গুরুত্বপূর্ণভাবে, আপনি **পরিমাপ করা** উচিত (Profiler) প্রকৃত bottleneck খুঁজে পেতে অপ্টিমাইজ করার আগে, কারণ অসতর্ক memoization জটিলতা যোগ করে সুবিধা ছাড়াই। পুনর্নির্মাণ কী ট্রিগার করে এবং কীভাবে তাদের সংরক্ষণ করতে হয় তা বোঝা বড় আকারের কর্মক্ষম অ্যাপের জন্য অপরিহার্য।