React Hooks changed how we write components. Let’s break down the most important ones and when to use them.

useState

The most basic hook — managing local state:

1
2
3
4
5
6
7
const [count, setCount] = useState(0)

return (
  <button onClick={() => setCount(count + 1)}>
    Clicked {count} times
  </button>
)

useEffect

Side effects made declarative:

1
2
3
4
5
6
7
8
9
useEffect(() => {
  const controller = new AbortController()

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)

  return () => controller.abort()
}, [])

Custom Hooks

The real power — extracting reusable logic:

1
2
3
4
5
6
7
8
9
10
11
12
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key)
    return stored ? JSON.parse(stored) : initialValue
  })

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])

  return [value, setValue]
}

Rules of Hooks

  1. Only call hooks at the top level
  2. Only call hooks from React functions
  3. Custom hooks must start with use

Hooks are simple in concept but powerful in practice. Master them, and you’ll write cleaner React code.