ReactJs Hooks

Last updated Feb 13, 2026 Published Jan 7, 2025

The content here is under the Attribution 4.0 International (CC BY 4.0) license

React Hooks are functions that let you use state and other React features in functional components. Introduced in React 16.8, hooks simplify code, improve performance, and enable code reuse without writing classes.

What Are React Hooks?

Hooks provide a way to manage state, side effects, and lifecycle events in functional components. They include built-in hooks like useState, useEffect, useReducer, and useRef, as well as custom hooks for reusing logic.

Why Use Hooks?

  • Simplify component logic by removing the need for class components
  • Make code more readable and maintainable
  • Enable sharing logic across components with custom hooks
  • Improve performance and reduce boilerplate

Motivation for Hooks (React Docs)

Essential React Hooks

useState

Manages local state in a functional component.

useEffect

Handles side effects such as data fetching, subscriptions, and manual DOM manipulations.

useReducer

Best for managing complex state logic, especially with arrays or objects.

useRef

Provides a way to persist values across renders without causing re-renders. Useful for accessing DOM elements directly.

Custom Hooks

Encapsulate and reuse logic across multiple components.

Rules of Hooks

  • Only call hooks at the top level of your React function
  • Only call hooks from React function components or custom hooks
  • You can use multiple hooks in a single component
  • Do not call hooks inside loops, conditions, or nested functions

Rules of Hooks (React Docs)

Advanced Usage and Patterns

  • Fetching Data: Use useEffect for server requests (example)
  • Synchronizing with External Stores: useSyncExternalStore for state synced with external sources
  • Event Handlers: Prefer effects in event handlers for imperative logic (Reactathon 2022 talk)
  • Effect Dependencies: Specify dependencies to avoid infinite loops (Dependency patterns)
  • New Hooks in React 19: Read about new client-side hooks

Common Pitfalls

  • useEffect is not a state setter
  • Avoid infinite loops by managing dependencies
  • Use hooks declaratively, not imperatively

Deep Dive

React hooks are implemented as part of the React core, primarily in the react and react-reconciler packages. Hooks enable functional components to manage state and side effects by leveraging a linked list structure and a dispatcher system under the hood.

The Hooks Dispatcher

Internally, React uses a dispatcher object to manage hook calls. When a component renders, React assigns a dispatcher (such as HooksDispatcherOnMount or HooksDispatcherOnUpdate) that tracks the order and state of each hook call. This ensures that hooks are called in the same order on every render, which is why the Rules of Hooks are so important.

Hook State Management

React maintains a linked list of hook objects for each component instance. Each hook (e.g., useState, useEffect) is represented as a node in this list, storing its state and queue of updates. When a hook like useState is called, React either creates a new hook node (on mount) or retrieves the existing one (on update).

Example: useState Implementation (Simplified)

function useState(initialState) {
  const hook = mountWorkInProgressHook();
  hook.memoizedState = typeof initialState === 'function' ? initialState() : initialState;
  const queue = (hook.queue = { pending: null });
  // ...dispatcher logic for setState
  return [hook.memoizedState, dispatchSetState.bind(null, hook, queue)];
}

Effect Handling

useEffect and similar hooks schedule side effects to run after the DOM has been updated. Internally, effects are stored in a separate list and executed in the commit phase of the React lifecycle.

Why Order Matters

React relies on the order of hook calls to match hook state with the correct component instance. Violating the rules (e.g., calling hooks conditionally) breaks this mapping and leads to bugs.

Further Reading

Resources and Further Reading

You also might like

Made with 💖 by @MatheusMarabesi