React HooksExplained

24 of 24 rows

Hook↕	Ce face↕	La ce îl folosești↕
Stare
⤢useState	Păstrează o singură valoare care declanșează un re-render când se schimbă.	Starea locală a componentei: câmpuri de formular, comutatoare, contoare.
⤢useReducer	Păstrează o stare condusă de un reducer de acțiuni, ca un mic store.	Stare cu mai multe câmpuri corelate sau tranziții complexe.
⤢useRef	Păstrează o valoare mutabilă care NU declanșează un re-render.	Containere mutabile, timere și acces direct la DOM prin .current.
Efecte
⤢useEffect	Rulează un efect secundar după render, cu curățare opțională.	Preluarea datelor, abonamente și sincronizarea cu un sistem extern.
⤢Effect cleanup	Funcția returnată de un efect rulează înaintea următorului efect și din nou la demontare.	Dezabonări și oprirea timerelor, sau anularea unui fetch în curs.
⤢useLayoutEffect	Ca useEffect, dar se declanșează sincron după mutarea DOM-ului.	Citirea sau scrierea layoutului înainte ca browserul să deseneze (toasturi, tooltipuri).
⤢useEffect vs handlers	Handlerele de evenimente rulează ca răspuns la o acțiune a utilizatorului; efectele rulează după render pentru sincronizare.	Logica cauzată de utilizator aparține unui handler, cea cauzată de render unui efect.
⤢StrictMode	În dezvoltare montează componentele de două ori, astfel încât efectele rulează, se curăță și rulează din nou.	Depistarea abonamentelor duble și a curățării lipsă înainte de producție.
Performanță
⤢useMemo	Memorează o valoare calculată până se schimbă dependențele.	Evitarea recalculelor scumpe între renderuri; schimbă intenționat o valoare din dependențe pentru a invalida cache-ul.
⤢useCallback	Memorează o referință de funcție până se schimbă dependențele.	Callback-uri stabile trimise la copii memoizați sau folosite ca dependențe.
⤢React.memo	Sare peste re-renderul unui component ai cărui props nu s-au schimbat.	Componente-copil grele; transmite o funcție de comparație ca al doilea argument când egalitatea superficială nu ajunge (un HOC, nu un hook).
Context și handle-uri externe
⤢useContext	Citește o valoare de context fără prop drilling.	Temă, locale sau un utilizator autentificat, partajate în arbore.
⤢useImperativeHandle	Personalizează instanța pe care o vede un părinte printr-un ref.	Expunerea unui API concentrat dintr-un copil prin forwardRef.
Concurență și altele
⤢useTransition	Marchează o actualizare de stare ca neurgentă, astfel încât UI-ul rămâne receptiv.	Menținerea inputului rapid în timp ce o listă grea se re-randează.
⤢useDeferredValue	Amână o valoare astfel încât actualizările pot fi întrerupte.	Debounce pentru renderuri scumpe fără timere.
⤢useId	Generează un id unic stabil pentru atributele de accesibilitate.	Legarea label și input între renderul de server și cel de client.
⤢use()	Citește un promise sau un context în timpul renderului; singurul hook pe care îl poți apela condiționat.	Despachetarea unui promise cu Suspense sau citirea contextului într-un return timpuriu.
⤢useActionState	Păstrează o stare condusă de o acțiune de formular, cu un indicator pending inclus.	Trimiteri de formulare care returnează erori sau stare actualizată de afișat inline.
⤢useOptimistic	Randează imediat o valoare optimistă, apoi revine la starea reală când acțiunea se încheie.	Afișarea unui like sau a unui mesaj trimis în timp ce cererea către server e în curs.
⤢useFormStatus	Citește starea pending a <form>-ului înconjurător, fără props.	Un buton de trimitere care se dezactivează cât formularul părinte se trimite.
⤢useSyncExternalStore	Se abonează la un store din afara React și citește un snapshot consecvent.	API-uri de browser precum starea online sau store-uri de stare ale terților.
⤢useInsertionEffect	Rulează înaintea efectelor de layout, creat pentru injectarea de reguli CSS-in-JS.	Biblioteci de stiluri care trebuie să insereze reguli înainte de citirea layoutului.
⤢useDebugValue	Afișează o etichetă proprie pentru starea internă a unui hook în React DevTools.	Etichetarea a ceea ce ține un hook custom în timpul depanării.
⤢Custom hooks (use*)	Hook-ul tău propriu care compune hook-urile integrate pentru a partaja logică.	Comportament cu stare reutilizabil, precum useFetch sau useMediaQuery.