The useEffect Hook

useEffect lets you perform side effects in function components.

Basic Usage

jsx
import { useEffect, useState } from 'react';
function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);  return <p>Seconds: {seconds}</p>;
}

Dependency Array

Empty [] - Run once on mount

[value] - Run when value changes

No array - Run on every render

Cleanup

Return a cleanup function to avoid memory leaks!