React Hooks Explained: What They Are and When to Use Them

React hooks changed how we write components. Before them, only class components could hold state, hooks let plain function components do everything. If you're learning React, understanding what hooks are used for, and which one to reach for, is the single most useful thing you can master.

What are React hooks used for?

React hooks are special functions that let function components 'hook into' React features like state, lifecycle and context, without writing a class. In short, they let a simple function component remember values, run side effects, and share logic. Every hook name starts with use (useState, useEffect, useRef), and React ships about a dozen built-in ones.

The hooks you'll use most

useState: remembering values

useState is the hook you'll use first and most. It gives a component a piece of state and a setter. When you call the setter, React re-renders with the new value.

import { useState } from "react";

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

useEffect: running side effects

useEffect runs code after render, for things that reach outside React: fetching data, setting up subscriptions, timers, or syncing with the DOM. The dependency array controls when it runs: empty means once on mount, with values means whenever those values change.

import { useEffect, useState } from "react";

function User({ id }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    let active = true;
    fetch(`/api/users/${id}`)
      .then((r) => r.json())
      .then((data) => { if (active) setUser(data); });
    return () => { active = false; }; // cleanup
  }, [id]); // re-run when id changes
  return <p>{user?.name ?? "Loading..."}</p>;
}

useRef: a box that survives renders

useRef gives you a mutable container whose .current persists across renders but does not trigger a re-render when it changes. Two main uses: referencing a DOM node, and storing a value you want to remember without re-rendering (like a timer id or previous value).

import { useRef } from "react";

function TextInput() {
  const inputRef = useRef(null);
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}

The rules of hooks

Hooks work by call order, so React needs them called the same way every render. Two rules keep them reliable:

1. 1.Only call hooks at the top level, never inside loops, conditions, or nested functions.
2. 2.Only call hooks from React function components or from other custom hooks.

If you ever see 'Rendered fewer hooks than expected', you almost certainly called a hook inside an if. Move it to the top level and it's fixed.

useMemo and useCallback: caching

These two optimize performance by caching. useMemo caches the result of an expensive calculation; useCallback caches a function so it stays the same between renders. Reach for them only when you have a measured problem, premature memoization adds complexity for no gain.

Custom hooks: reuse your own logic

The real power of hooks is composition. Any function that starts with use and calls other hooks is a custom hook, letting you extract and reuse stateful logic across components.

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(
    () => JSON.parse(localStorage.getItem(key)) ?? initial
  );
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

The short version

React hooks let function components use state and other features without classes. Use useState for values that change, useEffect for side effects, useRef for values that persist without re-rendering, and custom hooks to reuse logic. Follow the two rules, only at the top level, only in components or hooks, and you'll avoid the common pitfalls.