What is a Hook

What is a Hook in React? State and Effects for Function Components

A React Hook is a special function—always named with a use prefix such as useState or useEffect—that lets function components tap into React state, DOM refs, context, and lifecycle synchronization. Before Hooks arrived in React 16.8, stateful logic forced developers to rewrite functions into verbose class components.

Common Built-In React Hooks

import { useState, useEffect } from 'react';

export function DocumentTitleCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button type="button" onClick={() => setCount((c) => c + 1)}>
      Increment ({count})
    </button>
  );
}

The Two Rules of Hooks

React tracks Hook values internally using an array indexed by call order. Breaking call order breaks state alignment across renders, so follow two strict rules:

1. Call Hooks Only at the Top Level: Never call Hooks inside if conditions, for loops, nested callbacks, or after an early return.
2. Call Hooks Only Inside React Functions: Call Hooks inside React function components or custom Hooks (useSomething), never in regular utility functions.

Common Mistakes When Learning Hooks

• Putting Hooks After Early Returns: Writing if (!user) return null; before useEffect(...) shifts Hook order when user logs in and crashes React.
• Using eslint-plugin-react-hooks Disabled: Keep the official React Hooks ESLint plugin active so missing dependencies and conditional hook calls are caught automatically.

Frequently Asked Questions

Can I use Hooks inside class components?

No. Hooks only work inside function components and custom Hooks. To reuse Hook logic in an old class component, wrap the class in a small function component and pass props down.

Why do all Hook names start with use?

The use prefix lets React's linter verify Hook call rules automatically and signals to teammates that the function follows Hook constraints.

Can I build my own custom Hooks?

Yes. Extracting useState and useEffect into a function named useFetch or useDebounce lets you share stateful behavior cleanly across components.