Fillimisht matni, pastaj rregulloni shkakun e vërtetë — mos shpërndarë useMemo kudo sipas hamendjes.
Përdorni React DevTools Profiler (aktivizoni "Highlight updates when components render"). Ai tregon se cilat komponentë janë ri-renderuar dhe pse (props ndryshoi, state ndryshoi, prindi ri-renderua, context ndryshoi).
1. Props të reja të objektit/grupit/funksionit në çdo render ndajnë React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Vlera e context e rikrijuar në çdo render → të gjithë konsumatorët ri-renderohen. Memorizohet value ose ndani kontekstet.
3. State vendosur shumë lart. Ulja e state në mënyrë që më pak komponentë të varen prej tij është shpesh fitimi më i madh:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Punë e shtrenjtë në render → mbështillni në useMemo.
Ri-renderimet janë zakonisht lira — React është i shpejtë. Shumica e "optimizimeve" shtojnë kompleksitet pa përfitim të matshëm. Preferon rregullime strukturore (vendosja e state, virtualizimi i listës për mijëra rreshta) në vend të shpërndarjes të memos. Optimizoni pikët e nxehta specifike që profajleri zbulon, dhe matni përsëri për të konfirmuar se rregullimi me të vërtetë ndihmon.