Milliseid peamisi React hook'e teate ja kasutate…

useState: Komponendi oleku haldamiseks.
useEffect: Kõrvalmõjude (API päringud, tellimused, DOM-i manipuleerimine) täitmiseks funktsionaalsetes komponentides vastusena muudatustele.
useContext: Konteksti väärtuse saamiseks komponendist ilma propide vahendamiseta vahetasandite kaudu.
useRef: Muutuvate väärtuste hoidmiseks, mis ei põhjusta uuesti renderdamist, või DOM-elementi viite saamiseks.
useMemo: Arvutuste mälupuhvri ja nende korduva täitmise vältimiseks, kui sõltuvused ei ole muutunud.
useCallback: Funktsioonide mälupuhverdamiseks, et vältida nende loomist iga renderi ajal ning parandada jõudlust React.memo kasutavates komponentides.
useReducer: Alternatiiv useState-le keerulisemate olekuhaldusvajaduste jaoks, eriti kasulik mitme seotud uuenduse korral või kui järgmine olek sõltub eelmisest.
useLayoutEffect: Käivitub sünkroonselt pärast kõiki DOM-i muudatusi ja enne, kui brauser "joonistab" muudatused. Kasutatakse olukordades, kus on vaja lugeda DOM-i elemendi asukohta pärast selle renderdamist ning vajadusel teha selle põhjal muudatusi.

Ma aktiivselt kasutan useState, useEffect, useContext ja useRef igapäevatöös. useMemo ja useCallback kasutan keerulisemates komponentides või suurte nimekirjadega töötamisel jõudluse optimeerimiseks. useReducer eelistangi keerulisemate olekuhaldusvajaduste korral. useLayoutEffect kasutan harva, peamiselt spetsiifiliste ülesannete jaoks, mis on seotud mõõtmiste ja paigutusega.

Näide useState ja useEffect kasutamisest:

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Lehe pealkirja uuendamine muutudes loendur
    document.title = `Olete klõpsanud ${count} korda`;
  }, [count]); // sõltuvus: efekt käivitub ainult `count` muutumisel

  return (
    <div>
      <p>Olete klõpsanud {count} korda</p>
      <button onClick={() => setCount(count + 1)}>
        Klõpsa
      </button>
    </div>
  );
}

Näide useContext kasutamisest:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light'); // Kontekst

function ThemedButton() {
  const theme = useContext(ThemeContext); // Konteksti väärtuse saamine
  return <button className={theme}>Teema nupp</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// Vanemkomponent, mis pakub konteksti väärtust
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Milliseid peamisi React hook'e teate ja kasutate?