React useEffect

useEffect lets you perform side effects - data fetching, timers, subscriptions.

Basic useEffect

Runs after every render:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return <button onClick={() => setCount(count + 1)}>Click</button>;
}

useEffect with Dependencies

Run only when specific values change:

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // Only runs when count changes

Run Once (On Mount)

Empty dependency array:

useEffect(() => {
  console.log('Component mounted!');
}, []); // Runs only once

Cleanup Function

Clean up subscriptions/timers:

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(timer); // Cleanup
}, []);

Fetching Data

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  return <div>{user?.name}</div>;
}

Common Patterns

Multiple Effects:

useEffect(() => {
  // Effect 1
}, [dep1]);

useEffect(() => {
  // Effect 2
}, [dep2]);

Remember

• Empty [] = runs once
• No [] = runs every render
• [count] = runs when count changes
• Always cleanup subscriptions/timers

Next: Learn custom hooks!