Ugrađeni React Hook-ovi

State Hook-ovi

State omogućava komponenti da “zapamti” informaciju poput korisničkog input-a. Na primer, form komponenta može koristiti state da čuva input vrednost, dok komponenta za galeriju slika može koristiti state da čuva indeks izabrane slike.

Da biste dodali state u komponentu, koristite jedan od ovih Hook-ova:

• useState deklariše state promenljivu koju direktno možete ažurirati.
• useReducer deklariše state promenljivu sa logikom ažuriranja unutar reducer funkcije.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Context Hook-ovi

Context omogućava komponenti da prima informacije od udaljenih roditelja bez prosleđivanja informacije kao props. Na primer, vaša komponenta na vrhu može proslediti trenutnu temu svim komponentama ispod, bez obzira koliko su duboko.

• useContext čita i pretplaćuje se na context.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Ref Hook-ovi

Ref-ovi omogućavaju komponenti da čuva informaciju koja se ne koristi za renderovanje, kao što je DOM čvor ili timeout ID. Za razliku od state-a, ažuriranje ref-a ne renderuje komponentu ponovo. Ref-ovi su “evakuacioni izlaz” u React paradigmi. Korisni su kada trebate raditi sa sistemima koji nisu React, poput ugrađenih API-ja u pretraživaču.

• useRef deklariše ref. Možete čuvati bilo koju vrednosti u njoj, ali se najčešće koristi za čuvanje DOM čvora.
• useImperativeHandle omogućava prilagođavanje izloženog ref-a vaše komponente. Ovo se retko koristi.

function Form() {
  const inputRef = useRef(null);
  // ...

Effect Hook-ovi

Effect-i omogućavaju komponenti da se konektuje i sinhronizuje sa eksternim sistemima. Ovo uključuje rad sa mrežom, DOM pretraživača, animacije, widget-e napisane u drugoj biblioteci i ostali kod koji nije napisan u React-u.

• useEffect povezuje komponentu na eksterni sistem.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effect-i su “evakuacioni izlaz” u React paradigmi. Nemojte koristiti Effect-e da orkestrirate tok podataka u vašoj aplikaciji. Ako ne interagujete sa eksternim sistemom, možda vam neće biti potreban Effect.

Postoje dve retko korišćene varijante useEffect-a sa razlikama u tajmingu:

• useLayoutEffect se okida pre nego što pretraživač ponovo iscrta ekran. Ovde možete meriti layout.
• useInsertionEffect se okida pre nego što React napravi izmene u DOM-u. Biblioteke ovde mogu ubaciti dinamički CSS.

Hook-ovi performansi

Uobičajen način za optimizaciju performansi ponovnih rendera je preskakanje nepotrebnog posla. Na primer, možete reći React-u da ponovo iskoristi keširani proračun ili da preskoči ponovni render ako se podaci nisu promenili od prethodnog rendera.

Da biste preskočili proračune i nepotrebne ponovne rendere, koristite jedan od ovih Hook-ova:

• useMemo vam omogućava da keširate rezultat skupog proračuna.
• useCallback vam omogućava da keširate definiciju funkcije pre njenog prosleđivanja u optimizovanu komponentu.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Ponekad ne možete preskočiti ponovno renderovanje, jer ekran treba da se ažurira. U tom slučaju, možete poboljšati performanse odvajanjem blokirajućih ažuriranja koja moraju biti sinhrona (poput pisanja u input) od neblokirajućih ažuriranja koja ne moraju da blokiraju korisnički interfejs (poput ažuriranja tabele).

Da biste dali prioritet renderovanju, koristite jedan od ovih Hook-ova:

• useTransition vam omogućava da označite promenu state-a kao neblokirajuću i dozvolite da je druga ažuriranja prekinu.
• useDeferredValue vam omogućava da odložite ažuriranje nekritičnih delova UI-a i prvo pustite ažuriranje ostalih delova.

Ostali Hook-ovi

Ovi Hook-ovi su uglavnom korisni za autore biblioteka i ne koriste se često u kodu aplikacije.

• useDebugValue vam omogućava da prilagodite labelu koju React DevTools prikazuje za vaš prilagođeni Hook.
• useId omogućava komponenti da sebi asocira jedinstveni ID. Tipično se koristi u API-jima za pristupačnost.
• useSyncExternalStore omogućava komponenti da se pretplati na eksterno skladište.

• useActionState vam omogućava da upravljate state-om akcija.

Vaši Hook-ovi

Možete da definišete vaše prilagođene Hook-ove kao JavaScript funkcije.