Inda ne za ku katanta buhajar gajiya daga abin sa weta da yawa?

Question

Accepted Answer

Canjin jihar gida yana haifar da sake yin amfani, kuma jiha marasa tsari na iya haifar da **ƙarin sake yin amfani da abin da ake buƙata** — yana jajartowa app. Mahimman dabarun gida: koro ni tsira, rabu jiha, tunani, da kiyaye jiha a gida. ## 1. Koro kaman kasan ƙasa ne maka bubuwa ```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); ``` Samun alaƙa da zaɓe (Zustand/Redux saito, Jotai atoms) sune karangiya mafi girma – fitilu ba za su sake yin amfani ba sai lokacin da kasan takaice ta canja ba ƙoƙarin a kowane sabawa. ## 2. Rabu jiha / halin kowa don taƙaitawa blin ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Tunani abubuwan amfani da darajai ```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 ``` Tunani ana mana jiya yara daga sake yin amfani lokacin da abubuwan taro (ta haɗi) ba sai suka canja – amma shi kaːi aiki ne kawai idan ka jiya abubuwan taro / kararɓo (saboda `useCallback`/`useMemo`) kuma ka sabunta jihar da **jiya marasa canja**. ## 4. Kiyaye jiha a takaice gwargwado ```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. Kar ka adana darajai da ɓayyewa; gujewa sabuwar haɗi a kowane amfani ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Yi amfani da tunani saito don bayyanin bayyana ```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 ``` ## Auna farko ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Me ta saba Ba da yawa sake yin amfani sune babbar dalilin da ke sa React/jiha da ke haifar da app suyi sannu, kuma suna fitowa daga yadda jiha ke tsarawa da yadda ake karbar shi. Kayan aiki – ƙarƙaƙƙen samun alaƙa da zaɓe, rabu halin kowa, tunani tare da haɗi na tsafe, sabuntar jihar ba tare da canja ba, da ƙarƙaƙƙen jiha – kiyaye gajiya abin sa weta tsaye. Mahimmi, ya kamata ka **auna** (Profiler) don samun ainihin takaice kafin a inganta, domin tunani ba tare da tunani ba yana ƙara rikitarwa ba tare da amfani ba. Ganewa abubuwan da ke haifar da sake yin amfani da yadda za ka tsare shi yana da mahimmanci ga manyan ayukan aiki.