Întâi măsoară, apoi repară cauza reală — nu presara useMemo peste tot la întâmplare.
Folosește React DevTools Profiler (activează "Highlight updates when components render"). Arată care componente au fost re-randate și de ce (props s-au schimbat, state s-a schimbat, componenta părinte s-a re-randat, context s-a schimbat).
1. Props noi de obiect/tablou/funcție la fiecare randare înving 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. Valoarea context recreată la fiecare randare → toți consumatorii se re-randează. Memoizează value sau împarte contextele.
3. State plasat prea sus. Coborârea state-ului pentru ca mai puține componente să depindă de acesta este adesea cea mai mare victorie:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Munca costisitoare în randare → înfășură în useMemo.
Re-randarile sunt de obicei ieftine — React este rapid. Majoritatea "optimizărilor" adaugă complexitate fără beneficiu măsurabil. Preferă reparații structurale (colocalizarea state-ului, virtualizarea listei pentru mii de rânduri) în loc să presori memos. Optimizează punctele fierbinți specifice pe care profiler-ul le relevă, și măsoară din nou pentru a confirma că reparația a ajutat cu adevărat.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează