Kādus galvenos React hook'us jūs zināt un izmantojat…

useState: Komponenta stāvokļa pārvaldībai.
useEffect: Blakus efektu (API pieprasījumi, abonementi, DOM manipulācijas) izpilde funkcionālajās komponentēs kā reakcija uz izmaiņām.
useContext: Pieejas konteksta vērtībai no komponentes bez starp līmeņu props nodošanas.
useRef: Mutablu vērtību glabāšanai, kas neizraisa pārrenderi, vai DOM elementa atsauces iegūšanai.
useMemo: Izvērtējumu memoizācijai un to atkārtotas izpildes novēršanai, ja atkarības nav mainījušās.
useCallback: Funkciju memoizācijai, lai novērstu to izveidi katrā pārrenderē un uzlabotu veiktspēju, nododot tās komponentiem, kas izmanto React.memo.
useReducer: Alternatīva useState sarežģītāka stāvokļa pārvaldībai, īpaši noderīga, ja ir daudz saistītu atjauninājumu vai ja nākamais stāvoklis ir atkarīgs no iepriekšējā.
useLayoutEffect: Darbojas sinhroni pēc visām DOM mutācijām un pirms pārlūkprogramma "zīmē" izmaiņas. Lietojams gadījumos, kad nepieciešams nolasīt DOM elementa novietojumu pēc tā atveidošanas un iespējams veikt izmaiņas atkarībā no tā.

Es aktīvi izmantoju useState, useEffect, useContext un useRef ikdienas darbā. useMemo un useCallback pielietoju sarežģītākās komponentēs vai darbā ar lieliem sarakstiem, lai optimizētu veiktspēju. useReducer dodu priekšroku sarežģītāka stāvokļa pārvaldībai. useLayoutEffect reti, galvenokārt specifiskiem uzdevumiem, kas saistīti ar mērījumiem un izvietojumu.

Piemērs useState un useEffect izmantošanai:

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

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

  useEffect(() => {
    // Atjaunina lapas virsrakstu, mainoties skaitītājam
    document.title = `Jūs nospiedāt ${count} reizes`;
  }, [count]); // Atkarība: efekts tiek izpildīts tikai, ja mainās `count`

  return (
    <div>
      <p>Jūs nospiedāt {count} reizes</p>
      <button onClick={() => setCount(count + 1)}>
        Nospiediet
      </button>
    </div>
  );
}

Piemērs useContext izmantošanai:

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext); // Konteksta vērtības iegūšana
  return <button className={theme}>Tēmas poga</button>;
}

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

// Vecāka komponentā ar nodrošinātāju
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Kādus galvenos React hook'us jūs zināt un izmantojat?