Lekce 7: Custom hooks

Co je vlastní hook (custom hook)? Kromě zabudovaných hooků v Reactu (useState, useEffect, useContext, apod.) si můžeme napsat i hooky vlastní. Hook obsahuje logiku, která jde pak jednoduše sdílet mezi komponentami.

Vlastní hook je velmi podobný normální React komponentě. Je to funkce, která může obsahovat vlastní stav, vlastní efekty, další pomocné funkce. Hook obvykle nevrací JSX jako klasická komponenta, ale vystavuje navenek některé ze svých interních stavů nebo metod.

Vlastní hooky musí na začátku svého jména obsahovat slovo use.

Ukázka jednoduchého hooku

Představme si, že máme jednoduchou komponentu Counter, která má v sobě počitadlo, které se zvětšuje po kliknutí na tlačítko.

export function Counter() {
  const [count, setCount] = useState<number>(0)

  const handlePlus = () => {
    setCount(cnt => cnt + 1)
  }

  return (
    <>
      <h1>Počet kliknutí: {count}</h1>
      <button onClick={handlePlus}>Zvětšit +1</button>
    </>
  )
}

Pro takto jednoduchou komponentu bychom vlastní hook rozhodně nemuseli vytvářet, ale bude se nám to na takhle jednoduchém příkladu lépe vysvětlovat.

Principem hooku je, že do něj přesuneme logiku, kterou chceme sdílet mezi různými komponentami. Nebo prostě jen chceme naši komponentu zjednodušit.

V našem případě do hooku přesuneme stav a funkci, která ho zvětšuje.

Vyzložíme si soubor useCounter.tsx a v něm vytvoříme funkci, která se nápadně podobá běžné komponentě, jen na konci nevrací JSX, ale proměnné/funkce, které chceme mít dostupné v místě, kde hook použijeme.

export function useCounter() {
  const [count, setCount] = useState<number>(0)

  const handlePlus = () => {
    setCount(cnt => cnt + 1)
  }

  return [count, handlePlus]
}

Naši původní komponentu Counter pak můžeme zjednodušit takto:

export function Counter() {
  const [count, handlePlus] = useCounter()

  return (
    <>
      <h1>Počet kliknutí: {count}</h1>
      <button onClick={handlePlus}>Zvětšit +1</button>
    </>
  )
}

Hook nám do komponenty vrací pole se dvěma prvky. První je hodnota samotného stavu, druhá je funkce, která stav zvětšuje o jedničku. Tento hook můžeme nyní použít kdekoliv, kde budeme potřebovat počitadlo.

Samozřejmě bychom do hooku mohli přidat i další funkce na změnšení nebo vynulování počitadla a ty pak z hooku také vracet ven.

Protože hook je obyčejná funkce, můžeme jí při jejím volání předat i nějaké parametry. Například bychom chtěli, abychom mohli nastavit výchozí hodnotu počitadla.

export function useCounter(initialCount: number) {
  const [count, setCount] = useState<number>(initialCount)

  const handlePlus = () => {
    setCount(cnt => cnt + 1)
  }

  return [count, handlePlus]
}

---

Pokračuj s lektorem na → Vlastní hooky a efekty