`Hook-ul useEffect în React` în React & Next.js

Ghid complet pentru hook-ul useEffect în React: sincronizarea cu sisteme externe, tabloul de dependențe și funcția de curățare (cleanup).

Sintaxă

useEffect(() => { ... return () => cleanup(); }, [deps]);

Hook-ul useEffect permite executarea de efecte secundare (side effects) în componente: conectarea la WebSockets, adăugarea de listeneri pe fereastra browserului sau manipularea timerelor.

Efect cu Funcție de Curățare (Cleanup)

import { useEffect, useState } from 'react';

export function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // Funcția returnată eliberează resursele la demontarea componentei:
    return () => window.removeEventListener('resize', handleResize);
  }, []); // [] = rulează doar la montare și demontare

  return Lățime fereastră: {width}px;
}