Vad är Hooks?

Vad är Hooks?

Vad är egentligen grejen med React Hooks?

Hooks har fått stor uppmärksamhet för att de hjälper till att förenkla state management.
Tidigare behövde vi skriva klass-komponenter för att hantera state men nu kan vi istället göra functional components med Hooks!

Hooks ger dina funktionskomponenter liv! Funktionskomponenter är fantastiska, men dumma! ? De gör bara vad de instrueras att göra via properties – inget mer. Så snart de behöver hantera state måste de skrivas om som klasskomponenter. ?Som tur är går utvecklingen framåt! ?
Hooks ersätter och förenklar livscykelmetoderna i React.

Så – ska jag använda Hooks, klasskomponenter eller både och?

När du läst in dig på Hooks och känner dig redo bör du testa Hooks i nya komponenter. React-teamet rekommenderar inte att du skriver om alla dina befintliga klasser med Hooks – om de inte redan är planerade att byggas om. Hooks kan inte användas i klasskomponenter, men du kan blanda klass- och funktionskomponenter i samma komponent-träd. I förlängningen är Hooks tänkt att helt ersätta klass-komponenter.

Notera att Hooks fortfarande är relativt nytt och vissa tredjeparts-bibliotek fortfarande kan sakna stöd för Hooks. Testa därför först dina ändringar i en ny git-branch! ?

Hur funkar Hooks jämfört med livscykelmetoder?

  • constructor:
    Function components behöver ingen constructor, du kan initiera statet med “useState”
  • getDerivedStateFromProps:
    shemalägg en uppdatering vid rendrering istället
  • shouldComponentUpdate:
    Använd React.memo() istället
  • render:
    Hanteras av function component body.
  • componentDidMount, componentDidUpdate, componentWillUnmount:
    Hook “useEffect” kan hantera alla kombinationer av dessa
  • componentDidCatch and getDerivedStateFromError:
    Det finns inga motsvarigheter än, men de kommer snart! ⏳

Läs mer om Hooks på Reacts hemsida

Tags: