useEffect Hook

useEffect lets you perform side effects in function components, like data fetching, subscriptions, or DOM manipulation.

Basic Usage

jsx

import { useEffect, useState } from 'react'

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

  useEffect(() => {
    document.title = `You clicked ${count} times`
  })

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

Dependency Array

jsx

// Run on every render
useEffect(() => { })

// Run only once (on mount)
useEffect(() => { }, [])

// Run when dependencies change
useEffect(() => { }, [count, name])

Cleanup Function

jsx

useEffect(() => {
  const subscription = subscribeToData()

  return () => {
    subscription.unsubscribe()
  }
}, [])

Data Fetching

jsx

useEffect(() => {
  async function fetchData() {
    const response = await fetch('/api/users')
    const data = await response.json()
    setUsers(data)
  }

  fetchData()
}, [])