Geef voorbeelden van wat je kunt doen met de useEffect-hook, naast het uitvoeren van serveraanvragen.

Beheer van de status van de paginatitel (document.title).

Abonneren en afmelden voor browsergebeurtenissen (bijvoorbeeld, wijzigen van de venstergrootte, klikken buiten het element):

useEffect(() => {
  const handleResize = () => {
    console.log('De grootte van het venster is gewijzigd');
  };
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Lege afhankelijkhedenlijst: effect wordt één keer uitgevoerd bij het monteren en wordt verwijderd bij het demontage.

Werken met lokale opslag (lezen/schrijven van gegevens):

useEffect(() => {
  const savedValue = localStorage.getItem('myInputValue');
  if (savedValue) {
    setInputValue(savedValue); // Er wordt aangenomen dat er een staat inputValue en een functie setInputValue is
  }
}, []); // Waarde laden bij het monteren.

useEffect(() => {
  localStorage.setItem('myInputValue', inputValue); // Opslaan bij wijziging van inputValue.
}, [inputValue]); // Afhankelijkheid van inputValue.

Initialiseren van externe bibliotheken of componenten.

Instellen en opschonen van timers (setTimeout, setInterval):

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Timer werkt');
  }, 1000);

  return () => {
    clearInterval(timerId); // Timer wordt opgeruimd bij demontage.
  };
}, []);

Volgen van wijzigingen in props of staat en acties uitvoeren als reactie.

Focus op een element bij het monteren van de component:

useEffect(() => {
  inputRef.current.focus(); // Er wordt aangenomen dat er een ref inputRef is
}, []);