useEffect

Vad är useEffect?

• En hook i React för att hantera sidoeffekter i funktionella komponenter
• Används för att utföra operationer som datahämtning, prenumerationer och manuella DOM-ändringar

Användningsfall

• Datahämtning
• Lyssna på events
• Uppdatera DOM
• Städa upp

Grundläggande Syntax

useEffect(() => {
  // Koden som ska köras
}, [dependencies]);

Dependency array

• En lista med variabler som useEffect ska lyssna på
• Om en variabel i arrayen uppdateras körs koden i useEffect
• Om arrayen är tom körs koden endast när komponenten renderas första gången

Exempel, användningsfall

• Datahämtning
• setInterval / setTimer
• Eventlyssnare

Exempel, datahämtning

const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://example.com');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

Exempel, setInterval

const [count, setCount] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setCount(count => count + 1);
  }, 1000);

  // Uppstädning körs när komponenten unmountas
  // eller när dependencies ändras
  return () => clearInterval(interval);
}, []);

Exempel, eventlyssnare

const [width, setWidth] = useState(window.innerWidth);

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

  // Uppstädning körs när komponenten unmountas
  // eller när dependencies ändras
  return () => window.removeEventListener('resize', handleResize);
}, []);

Demo - eventlyssnare