Ar dtús tomhais, ansin ceartaigh an fhíorfhdhúil — ná scaip useMemo i ngach áit ar bharúil.
Baineann úsáid as an React DevTools Profiler (cumasaigh "Highlight updates when components render"). Taispeánann sé cé na comhpháirt a raibh athrenderála déanta acu agus cén fáth (bhreise na props, bhreise an stáit, bhreise an tuismitheoir, bhreise an comhthéacs).
1. Props nua/eagar/feidhm gach render a bhuaileann 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. Luach comhthéacs atá ath-chruthaithe gach render → gach feidhmeannóir a athrenderála. Cuimhnigh ar an value nó roinn na comhthéacsanna.
**3. Stáit ró-ard. ** Ísliú an stáit ionas go bhfuil níos lú comhpháirteanna ag brath air an bhuadhaire is mó:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Obair chostasach i render → foluain in useMemo.
Is iomaí go bhfuil athrenderála saor — React atá gasta. Is iomaí "bharrfheabhsaithe" a chuireann castacht ar fáil ar bhreise soiléir. Roghnaigh socruithe struchtúrtha (coibhneasú an stáit, liosta virtualization le haghaidh na mílte sraitheanna) thar scaipthe scaipeadh. Barrfheabhsaítear na spréachphointí sonracha a nochtann an profiler, agus déan re-thomhas a dhearbhú gur chabhraigh an leigheas go fírinne.