Lite om ”React Hooks” – vecka 3

Under Reacts utveckling sedan dess introduktion 2013 har komplexa lösningar ersatts med enklare lösningar. Ett exempel på detta är React Hooks som används i funktionsbaserade komponenter.

Sedan klasser introducerades i Javascript (2015) började man i React använda klasskomponenter. Hooks introducerades 2018. Man ville skapa något som var enkelt, komponerbart, flexibelt och utökningsbart (ursäkta svengelskan).

Eftersom jag inte jobbat så mycket med klasskomponenter behövde jag sätta mig in det för att förstå vinsterna med ”hooks” och funktionsbaserade komponenter. En viss förståelse av hooks har jag från WordPress temautveckling. Hooks i WordPress är funktioner som man ”hakar på” till ”WordPress core” (själva grundprogrammet) vid en viss specifierad tidpunkt, eller snarare en viss ”state”, av en applikations livscykel. Och samma princip gäller med React hooks.

I React klasskomponenter krävdes ett antal ”life cycle methods”, metoden ”super” i konstruktorn, det förvirrande”this”, ingen enkel lösning på återanvändandet av logik (man använde ”higher-order components” och ”render props”) samt behovet av ”data-binding”. Och klasskomponenter behövdes för att kunna använda ”state”.

Med hooks slipper man det mesta av komplexiteten jag nämnde ovan, och med ”useState” kan man använda ”state” i funktionsbaserade komponenter (”useState” är alltså en hook).

Glöm ”life cycle methods”

Med hooks behöver man inte längre ”life cycle methods”. Man använder istället en hook som kallas ”useEffect()”. Den ersätter ”componentDidMount”, ”componentDidUpdate” och ”componentWillUnmount”.

Och useEffect låter dig använda sidoeffekter i funktionsbaserade komponeneter (”side effects”). Sidoeffekter kan exempelvis handla om hämtning av data eller manipulering av DOM.

Man kan även skapa egna hooks (”custom hooks”) som är frikopplade (”decoupled”) från gränssnittet.

Signifikativt för hooks

  • Möjliggör ”state” i funktionsbaserade komponenter
  • Hooks används bara i funktionsbaserade komponenter, ej i klasskomponenter
  • Alla hooks i en funktion måste köras i samma ordningsföljd varje gång komponenten renderas.
  • Hooks kan inte placeras i en funktions villkorssats, i en nästlad funktion eller i en loop utan måste ligga i komponentens översta nivå.
  • useState hook returnerar två värden, den ena är nuvarande ”state” och den andra är en funktion som kan uppdatera ”state”.
  • useEffect hook möjliggör sidoeffekter
  • Hooks körs endast inifrån komponenter

Resurser

Why React Hooks
A Simple Explanation of React.useEffect()
useState and useEffect simply explained