Introduction to React Hooks

Hooks are special functions, all starting with the word "use", that let function components tap into React features like state, side effects, and context without writing a class. Before hooks were introduced, only class components could hold state or run lifecycle logic; hooks brought that same power to plain functions, which is why modern React code is written almost entirely with function components.

Common built-in hooks include useState for local state, useEffect for side effects, useContext for reading context, useRef for mutable values that persist without causing re-renders, useMemo and useCallback for memoization, and useReducer for more complex state logic. React also lets you build your own custom hooks by combining these building blocks.

Why it matters

Hooks are how function components get state, side effects and access to React's features. They come with two rules that are not optional: React identifies each hook by the order in which it is called, so breaking the rules produces state that silently belongs to the wrong variable.

The Rules of Hooks

Hooks work reliably only if they are called in a very specific, consistent way, because React matches up hook calls between renders purely by the order in which they were called — not by name.

• Only call hooks at the top level. Never call a hook inside a loop, a conditional, or a nested function — doing so can change how many hooks run, or in what order, between renders.
• Only call hooks from React functions. Call them from function components or from other custom hooks, never from plain JavaScript functions or class components.
• Call them in the same order every render. Because React relies on call order to associate each hook with its stored state, conditionally skipping a hook call would misalign every hook that comes after it.

Why Hooks Replaced Class Lifecycle Methods

Class components spread related logic across separate lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), which often forced you to duplicate the same logic in multiple places. Hooks let you group related logic together in one place regardless of when it runs, and they make it far easier to extract and reuse stateful logic across components through custom hooks — something class components could not do cleanly.

ESLint Enforcement of Hook Rules

Because breaking the Rules of Hooks can cause subtle, hard-to-trace bugs, most React projects install the eslint-plugin-react-hooks package, which statically flags hooks called conditionally, inside loops, or from non-component functions before the code ever runs.

Example

import { useState, useEffect } from 'react';

// Correct: hooks always called at the top level, in the same order every render.
function UserStatus({ userId }) {
  const [isOnline, setIsOnline] = useState(false);

  useEffect(() => {
    setIsOnline(userId % 2 === 0); // pretend even IDs are "online" for this example
  }, [userId]);

  return <p>{isOnline ? 'Online' : 'Offline'}</p>;
}

// Incorrect (do not do this): calling useState inside a condition
// function BrokenComponent({ showExtra }) {
//   if (showExtra) {
//     const [extra, setExtra] = useState(0); // breaks the Rules of Hooks
//   }
//   return <div />;
// }

export default function App() {
  return <UserStatus userId={4} />;
}

Renders "Online" because userId (4) is even, per the effect's logic; the commented-out BrokenComponent illustrates the invalid pattern of calling useState conditionally, which React would reject with a "Rendered more hooks than during the previous render" style error if it were actually run under changing conditions.

Exercise

Do this in src/App.jsx of a Vite + React project. The component below breaks the rules of hooks by calling useState inside a condition. Fix it so that every hook is called at the top level on every render, while keeping the behaviour: the detail text is shown only when showDetails is true.

Expected result: the component works with showDetails true or false, and the React hooks lint rule reports no error.

import { useState } from "react";

function Profile({ showDetails }) {
  const [name] = useState("Asha");

  if (showDetails) {
    const [bio] = useState("Developer from Pune");
    return <p>{name}: {bio}</p>;
  }

  return <p>{name}</p>;
}

export default function App() {
  return <Profile showDetails={true} />;
}

import { useState } from "react";

function Profile({ showDetails }) {
  const [name] = useState("Asha");
  const [bio] = useState("Developer from Pune");

  if (showDetails) {
    return <p>{name}: {bio}</p>;
  }

  return <p>{name}</p>;
}

export default function App() {
  return <Profile showDetails={true} />;
}

Quick quiz

Interview questions