Hooks in React

What is a hook in React?
A Hook is just a function whose name starts with use, and it lets you tap into React's internals — state, context, refs, lifecycle timing, etc. — from a plain function component.

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

The Two Rules of Hooks

1. Only call Hooks at the top level — not inside loops, conditions, or nested functions. This ensures React calls them in the same order every render.
2. Only call Hooks from React function components or custom Hooks — not regular JavaScript functions.

Custom Hooks

You can also build your own Hooks by combining existing ones — this is how you extract and reuse stateful logic across components. A custom Hook is just a function that starts with use and calls other Hooks inside it.

Ultimately, Hooks are the bridge that let function components do everything class components could do — and more — with less code.