React Hooks Rules and Best Practices

A comprehensive guide to react hooks rules and best practices with production examples and best practices.

Why React Hooks Rules Exist

React Hooks are functions that let you use state and lifecycle features from function components. They are governed by two core rules: only call Hooks at the top level of your component, and only call Hooks from React functions. These rules are not arbitrary—they ensure that the order of Hook calls is consistent across renders. React relies on this order to correctly associate state and effects with each Hook. Violating these rules leads to subtle bugs like stale state, infinite loops, or crashes. For example, calling a Hook inside a condition can shift the call order, causing React to misassign state. Understanding why these rules exist helps you write predictable components and debug issues faster.

import { useState } from 'react';

export default function BadComponent({ flag }) {
  if (flag) {
    const [count, setCount] = useState(0); // ❌ Conditional hook
  }
  const [name, setName] = useState('');
  return <div>{name}</div>;
}

The Rules of Hooks: Top-Level Only

The first rule of Hooks is to call them at the top level of your React function, not inside loops, conditions, or nested functions. This ensures that Hooks are called in the same order each time a component renders. React uses a linked list of Hook nodes internally; the order of calls determines which state belongs to which Hook. If you break this order, React's internal state mapping becomes corrupted. For example, moving a useState inside a loop will cause the number of Hooks to change between renders, leading to errors. Always place all Hook calls at the top of your component, before any early returns.

import { useState, useEffect } from 'react';

export default function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

Only Call Hooks from React Functions

The second rule restricts Hook calls to React function components and custom Hooks. You cannot call Hooks from regular JavaScript functions, class components, or event handlers. This ensures that Hooks are only used within the React functional paradigm, where the framework can manage their lifecycle. Custom Hooks are the only exception—they are JavaScript functions whose name starts with 'use' and that call other Hooks. This rule prevents misuse like calling useState inside a utility function, which would break the component's state management. Always ensure your custom Hooks follow the naming convention and only call Hooks at their top level.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

export default function App() {
  const width = useWindowWidth();
  return <p>Window width: {width}px</p>;
}

The Dependency Array: Your Safety Net

useEffect, useMemo, and useCallback accept a dependency array that tells React when to re-run the effect or recompute the value. Omitting dependencies or including stale values leads to bugs like infinite loops or missing updates. The rule is simple: include every reactive value (props, state, derived values) used inside the effect or memo. The exhaustive-deps ESLint rule enforces this. However, you may intentionally omit a dependency if you want to run an effect only on mount (empty array). Be cautious: stale closures are a common source of bugs. Use the functional update form of setState when the new state depends on the old state to avoid unnecessary dependencies.

import { useState, useEffect } from 'react';

export default function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => setResults(data));
  }, [query]); // ✅ query is included

  return <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
}

useState: Immutable Updates and Functional Updates

State in React must be updated immutably. For objects and arrays, always create a new reference instead of mutating the existing state. Use the spread operator or methods like map/filter that return new arrays. When the new state depends on the previous state, use the functional update form: setCount(prev => prev + 1). This avoids stale state issues, especially in concurrent mode or when multiple state updates are batched. Functional updates are also safer inside useEffect dependencies because they don't require the previous state to be listed as a dependency.

import { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos(prev => [...prev, { id: Date.now(), text, done: false }]);
  };

  const toggleTodo = (id) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    );
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.done ? <s>{todo.text}</s> : todo.text}
        </li>
      ))}
    </ul>
  );
}

useEffect: Side Effects and Cleanup

useEffect is the primary hook for side effects: data fetching, subscriptions, timers, and manual DOM manipulations. Always return a cleanup function to avoid memory leaks and race conditions. For example, when fetching data, use an abort controller or ignore stale responses. Cleanup runs on unmount and before re-running the effect. This is crucial for subscriptions like WebSockets or event listeners. Also, avoid async functions directly inside useEffect; instead, define an async function inside and call it.

import { useState, useEffect } from 'react';

export default function UserStatus({ userId }) {
  const [status, setStatus] = useState('offline');

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch(`/api/users/${userId}/status`, { signal })
      .then(res => res.json())
      .then(data => setStatus(data.status))
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });

    return () => controller.abort();
  }, [userId]);

  return <p>Status: {status}</p>;
}

useMemo and useCallback: When to Memoize

useMemo memoizes a computed value, and useCallback memoizes a function. They are optimization tools, not guarantees. Use them only when the computation is expensive (e.g., large arrays, complex calculations) or when the value/function is passed to a child component that uses React.memo. Premature memoization adds complexity and can even hurt performance by increasing memory usage. Profile first, then memoize. Also, useMemo should not be used for side effects; that's what useEffect is for. Remember that useMemo and useCallback have their own dependency arrays, which must be correct.

import { useState, useMemo, useCallback } from 'react';

function ExpensiveList({ items, filter }) {
  const filtered = useMemo(
    () => items.filter(item => item.includes(filter)),
    [items, filter]
  );

  return <ul>{filtered.map(item => <li key={item}>{item}</li>)}</ul>;
}

export default function App() {
  const [filter, setFilter] = useState('');
  const items = useMemo(() => Array.from({ length: 10000 }, (_, i) => `Item ${i}`), []);

  const handleChange = useCallback((e) => setFilter(e.target.value), []);

  return (
    <>
      <input onChange={handleChange} />
      <ExpensiveList items={items} filter={filter} />
    </>
  );
}

Custom Hooks: Extract and Reuse Logic

Custom Hooks are the primary way to reuse stateful logic across components. They are JavaScript functions that call other Hooks and follow the same rules. Name them with a 'use' prefix to enable linting. Extract logic that involves multiple Hooks or complex side effects into a custom Hook. This improves readability and testability. For example, a useFetch hook can encapsulate loading, error, and data states. Custom Hooks can also accept arguments and return values. They compose naturally, allowing you to build complex behavior from simple pieces.

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then(data => {
        if (!cancelled) {
          setData(data);
          setLoading(false);
        }
      })
      .catch(err => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

Testing Hooks: Best Practices

Testing Hooks requires a React environment. Use @testing-library/react-hooks or renderHook from React's test utilities. Test the hook's behavior by calling it inside a test component. For custom Hooks, test the returned values and side effects. Mock external dependencies like fetch. Ensure that state updates and effects run correctly. Also test edge cases: missing dependencies, cleanup, and error states. Avoid testing implementation details; focus on the hook's contract (inputs and outputs).

import { renderHook, act } from '@testing-library/react';
import { useFetch } from './useFetch';

global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve({ name: 'John' }),
  })
);

test('should return data after fetch', async () => {
  const { result, waitForNextUpdate } = renderHook(() => useFetch('/api/user'));

  expect(result.current.loading).toBe(true);

  await waitForNextUpdate();

  expect(result.current.data).toEqual({ name: 'John' });
  expect(result.current.loading).toBe(false);
  expect(result.current.error).toBeNull();
});

Common Pitfalls and How to Avoid Them

Even experienced developers fall into Hook traps. Stale closures: when an effect captures an old value because the dependency array is missing. Infinite loops: when an effect updates state that is in its dependency array. Over-fetching: when useEffect runs on every render due to missing dependencies. State mutation: directly modifying state objects. Mixing Hooks with class components: you cannot use Hooks inside class components. To avoid these, always use the exhaustive-deps ESLint plugin, prefer functional updates, and keep state minimal. Profile before optimizing.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setCount(count + 1); // ❌ count is in deps, causes infinite loop
  }, [count]);

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

Performance Optimization with Hooks

React is fast by default, but you can optimize with Hooks. Use React.memo to prevent unnecessary re-renders of child components when props haven't changed. Combine with useCallback and useMemo to preserve referential equality. Avoid creating new objects or arrays in render that are passed as props. Use useRef for mutable values that don't need to trigger re-renders. For large lists, use virtualization (e.g., react-window). Always measure performance with React DevTools Profiler before optimizing.

import { useState, useCallback, memo } from 'react';

const ListItem = memo(({ item, onDelete }) => {
  console.log('Rendering', item.id);
  return (
    <li>
      {item.text}
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </li>
  );
});

export default function List({ items }) {
  const [selected, setSelected] = useState(null);

  const handleDelete = useCallback((id) => {
    // delete logic
  }, []);

  return (
    <ul>
      {items.map(item => (
        <ListItem key={item.id} item={item} onDelete={handleDelete} />
      ))}
    </ul>
  );
}

Migrating from Class Components to Hooks

Migrating class components to Hooks can improve code readability and reduce bundle size. Start by identifying state and lifecycle methods. Replace this.state and this.setState with useState. Replace componentDidMount, componentDidUpdate, and componentWillUnmount with useEffect. Use useRef for instance variables. Convert lifecycle logic into multiple useEffect calls if needed. Test thoroughly after migration. Hooks allow you to extract logic into custom Hooks, making the code more modular. However, don't migrate everything at once; do it incrementally.

// Before: Class component
class Timer extends React.Component {
  state = { seconds: 0 };
  intervalId = null;

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prev => ({ seconds: prev.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render() {
    return <p>{this.state.seconds}s</p>;
  }
}

// After: Functional component with Hooks
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{seconds}s</p>;
}

React Compiler and Hook Rules

The React Compiler (formerly known as React Forget) is a new tool that automatically memoizes components and hooks, reducing the need for manual useMemo, useCallback, and React.memo. However, it does not change the fundamental rules of hooks. The compiler still requires hooks to be called at the top level of React functions and only from React functions. The compiler enforces these rules during compilation and will throw errors if violations are detected. For example, calling a hook inside a condition or loop will still be flagged. The compiler's memoization optimizations are applied after the rules are satisfied, meaning you must still follow the rules of hooks. In practice, the compiler can eliminate many performance pitfalls, but developers must ensure their code adheres to the rules to benefit from compilation. A common misconception is that the compiler allows breaking hook rules—it does not. The compiler simply automates memoization, not the structural constraints of hooks.

// ❌ This will still cause a compiler error
function MyComponent({ flag }) {
  if (flag) {
    const [value, setValue] = useState(0); // Error: Hook called conditionally
  }
  return <div />;
}

// ✅ This is valid and can be optimized by the compiler
function MyComponent({ flag }) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    // side effect
  }, []);
  return <div>{flag ? value : null}</div>;
}

Server Components and Hooks

React Server Components (RSC) run on the server and do not have access to client-side features like state, effects, or browser APIs. Therefore, hooks such as useState, useEffect, useReducer, useRef, and custom hooks that use them are unavailable in Server Components. Only hooks that are purely computational and do not rely on client-side interactivity can be used, such as useId (for generating unique IDs) and use (for reading context, but only in limited scenarios). If you attempt to use a client-side hook in a Server Component, React will throw an error. To use hooks, you must mark the component with 'use client' directive, making it a Client Component. This distinction is crucial for performance: Server Components reduce bundle size and improve initial load, but they cannot handle interactivity. When designing your app, separate server-only data fetching and static rendering from client-side interactive logic. For example, a Server Component can fetch data and pass it to a Client Component that uses hooks for interactivity.

// ServerComponent.server.jsx (no 'use client')
export default function ServerComponent() {
  // ❌ Cannot use hooks like useState here
  // const [count, setCount] = useState(0); // Error
  return <div>Static content</div>;
}

// ClientComponent.client.jsx ('use client')
'use client';
import { useState } from 'react';
export default function ClientComponent({ data }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>Count: {count}</button>;
}

useReducer vs useState Decision Tree

Choosing between useState and useReducer depends on the complexity of your state logic. useState is ideal for simple, independent state values like a toggle, a counter, or a form field. useReducer is better when state transitions involve multiple sub-values or when the next state depends on the previous state in complex ways. A decision tree: (1) Is your state a single primitive value? Use useState. (2) Does your state have multiple related values that change together? Consider useReducer. (3) Do you have complex state logic with multiple conditions or actions? Use useReducer. (4) Do you need to pass state update logic down to child components without callbacks? useReducer's dispatch is stable and can be passed directly. (5) Are you dealing with deeply nested state? useReducer with Immer can simplify updates. For example, a form with multiple fields is a good candidate for useReducer because you can handle all field updates with a single reducer. In contrast, a simple counter is fine with useState. Performance-wise, useReducer can avoid unnecessary re-renders if the reducer is pure and the dispatch function is stable. However, for most cases, useState is simpler and sufficient. Start with useState and refactor to useReducer when you find yourself writing multiple useState calls that are tightly coupled.

// useState for simple state
const [count, setCount] = useState(0);

// useReducer for complex state
const initialState = { count: 0, step: 1 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload };
    default:
      return state;
  }
}
const [state, dispatch] = useReducer(reducer, initialState);