React Hooks og Context har endret tilnærmingen til tilstandshåndtering og datadeling i React-applikasjoner. Med introduksjonen av hooks i versjon 16.8 i 2019, fikk utviklere muligheten til å bruke tilstand og livssyklusmetoder i funksjonelle komponenter, noe som førte til mer konsis og lesbar kode.

Context gir på sin side en effektiv måte å dele data mellom komponenter uten prop drilling. Vi skal utforske det kraftfulle samspillet mellom React hooks og Context, og vise hvordan de sammen kan forenkle kompleks tilstandshåndtering og legge til rette for sømløs dataflyt gjennom komponenttreet.

I de neste kapitlene vil vi se nærmere på følgende:

State-hook

useState gjør det mulig for en komponent å beholde og hente informasjon (for eksempel brukerinput). For eksempel kan en skjemakomponent bruke state for å lagre inputverdien, mens en bildegalleri-komponent kan bruke state for å holde styr på valgt bildeindeks.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Ref-hook

useRef gir en komponent mulighet til å beholde informasjon som ikke påvirker rendering, som for eksempel en DOM-node eller en timeout-ID. I motsetning til state vil endringer på en ref ikke føre til at komponenten rendres på nytt. Refs fungerer som en "nødutgang" fra det vanlige React-paradigmet og er nyttige når man skal samhandle med systemer utenfor React, som for eksempel native nettleser-API-er.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Effekt-hook

useEffect gjør det mulig for en komponent å etablere forbindelser og synkronisere med eksterne systemer, inkludert nettverksinteraksjon, manipulering av nettleserens DOM, håndtering av animasjoner, integrering av widgeter utviklet med ulike UI-biblioteker, og sømløs innlemming av ikke-React-kode.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Memo-hook

useMemo forbedrer ytelsen ved gjengivelse ved å minimere unødvendige beregninger. For eksempel kan vi instruere React til å gjenbruke en mellomlagret beregning eller unngå ny gjengivelse hvis dataene forblir uendret siden forrige gjengivelse.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Context-hook

useContext gir en komponent mulighet til å få tilgang til informasjon fra fjerne foreldrekomponenter uten å sende props. Dette gjør det mulig for toppnivåkomponenten i appen å sømløst sende det nåværende UI-temaet til alle underordnede komponenter, uavhengig av hvor dypt de ligger i komponenttreet.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}