React

Hooks

Hva er Hooks? 🤔

  • En ny React-feature (fra versjon 16.8)

  • Lar deg ha tilstand og sideeffekter i React-komponentene dine

  • De mest vanlige hooksene er:

    • useState 

    • useEffect

 

NB! Hooks må brukes på toppnivå (ikke i løkker, if-setninger eller nøstede funksjoner)

Ytterligere Hooks 🤯

  • useReducer

  • useCallback

  • useMemo

  • useRef

  • useImperativeHandle

  • useLayoutEffect

  • useDebugValue

Dere kan også lage egne Hooks – Custom Hooks – som samler flere Hooks.

useState 🚦

Brukes til tilstandslogikk

useState 🚦

Toggle tilstand

useState 🚦

Populere en liste

useEffect ⚡️

  • Forteller React at komponenten skal gjøre noe etter en render
  • Brukes til sideeffekter (f.eks. nettverkskall, endre DOMen etc.)

useEffect ⚡️

useEffect ⚡️

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

Trigging av effekter kan utelates.

ℹ️

Denne effekten trigges kun ved første render

useEffect ⚡️

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

Trigging av effekter kan utelates.

ℹ️

Denne effekten trigges kun ved første render

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

ℹ️

Denne effekten trigges kun når count endrer seg.

useEffect ⚡️

Custom Hooks 🏗

Made with Slides.com