React Hooks Complete Guide

What are React Hooks?

Hooks are functions (introduced in React 16.8) that let you use state and other React features inside function components — no classes needed. Every hook name starts with use.

useState — Local State

const [value, setValue] = useState(initial);
const [name, setName] = useState("");
const [items, setItems] = useState([]);

useEffect — Side Effects

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

  return () => { /* cleanup */ };
}, [count]); // re-run only when count changes

useContext — Avoid Prop Drilling

const theme = useContext(ThemeContext);

useRef — Mutable Value / DOM Access

const inputRef = useRef(null);
// later: inputRef.current.focus();

useMemo & useCallback — Performance

const expensive = useMemo(() => compute(a, b), [a, b]);
const handler = useCallback(() => doThing(id), [id]);

The Rules of Hooks

• Only call hooks at the top level — never inside loops, conditions, or nested functions.
• Only call hooks from React functions (components or custom hooks).

Custom Hooks

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn(o => !o);
  return [on, toggle];
}

FAQs

Why does my useEffect run twice?

In React 18 Strict Mode (development only), effects run twice to help you catch missing cleanup. It does not happen in production.

When should I use useMemo?

Only for genuinely expensive calculations or to keep stable references. Don't over-optimise. More in our React section.