React Hooks Explained — useState and useEffect for Beginners

Hooks are functions that give components superpowers. Two of them cover most real work.

useState — data that changes

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Calling setCount re-renders the component with the new value. Never mutate state directly (count++ does nothing visible).

useEffect — side effects

useEffect(() => {
  fetch(`/api/user/${id}`).then(r => r.json()).then(setUser);
}, [id]);   // ← the dependency array

The dependency array rules

• [] — run once after first render (fetch initial data)
• [id] — run when id changes
• omitted — run after EVERY render (almost always a bug)

The two rules of hooks

Only call hooks at the top level (never in ifs/loops), and only inside components or custom hooks. Break these and React's state tracking corrupts.

Drill deeper with 50 React interview questions — hooks are Q16–Q30.