Hooks Overview

Hooks are functions that let you “hook into” React state and lifecycle features from function components. They let you use state and other React features without writing a class.

Built-in Hooks

React provides several built-in Hooks for different purposes:

State Hooks

State lets a component remember information like user input.

useState - Declares a state variable
useReducer - Declares a state variable with reducer logic

Context Hooks

Context lets a component receive information from distant parents without passing it as props.

useContext - Reads and subscribes to a context

Ref Hooks

Refs let a component hold information that isn’t used for rendering, like a DOM node.

useRef - Declares a ref
useImperativeHandle - Customizes the ref exposed by your component

Effect Hooks

Effects let a component connect to and synchronize with external systems.

useEffect - Connects to an external system
useLayoutEffect - Fires before browser paint
useInsertionEffect - Fires before React makes DOM changes

Performance Hooks

These hooks help optimize re-rendering performance.

useMemo - Caches the result of an expensive calculation
useCallback - Caches a function definition
useTransition - Marks state updates as non-urgent
useDeferredValue - Defers updating a part of the UI

Resource Hooks

These hooks let components access resources without them being part of their state.

use - Reads the value of a Promise or Context

Other Hooks

useId - Generates unique IDs
useSyncExternalStore - Subscribes to an external store
useActionState - Manages state for Server Actions
useOptimistic - Shows optimistic UI updates
useDebugValue - Customizes debug display in React DevTools

Rules of Hooks

Hooks are JavaScript functions with two important rules:

Only call Hooks at the top level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

function Component() {
  // ✅ Good: Top level of component
  const [state, setState] = useState(0);
  
  if (condition) {
    // ❌ Bad: Inside condition
    const [other, setOther] = useState(1);
  }
  
  // ✅ Good: Top level
  useEffect(() => {
    // Effect logic
  });
}

Only call Hooks from React functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components
✅ Call Hooks from custom Hooks

// ❌ Bad: Regular function
function regularFunction() {
  const [state, setState] = useState(0);
}

// ✅ Good: React component
function Component() {
  const [state, setState] = useState(0);
}

// ✅ Good: Custom Hook
function useCustomHook() {
  const [state, setState] = useState(0);
  return state;
}

Custom Hooks

You can create your own Hooks to extract component logic into reusable functions. Custom Hooks are JavaScript functions whose name starts with “use” and that may call other Hooks.

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;
}

// Usage in component
function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}px</div>;
}

Custom Hooks let you share stateful logic, not state itself. Each call to a Hook is completely independent from every other call to the same Hook.

Hook Call Requirements

Hooks can only be called inside the body of a function component. Calling Hooks outside of a React component will result in an error:

Invalid hook call. Hooks can only be called inside of the body of a function component.

This error can happen for these reasons:

Mismatching versions of React and the renderer (e.g., React DOM)
Breaking the Rules of Hooks
Having more than one copy of React in the same app

TypeScript Support

All React Hooks have built-in TypeScript types. You can use generics to specify types:

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);
const ref = useRef<HTMLDivElement>(null);

Performance Considerations

Hooks don’t add runtime overhead compared to class components
State updates are batched automatically in React 18+
Use performance hooks like useMemo and useCallback only when needed
Don’t optimize prematurely - measure first

Migration from Classes

If you’re migrating from class components:

Class Component	Hook Equivalent
`this.state`	`useState`
`this.setState`	`useState` setter
`componentDidMount`	`useEffect(() => {...}, [])`
`componentDidUpdate`	`useEffect(() => {...})`
`componentWillUnmount`	`useEffect` cleanup function
`this.myRef`	`useRef`
Context Consumer	`useContext`

Next Steps

Start with useState for basic state management
Learn useEffect for side effects
Explore useContext for prop drilling solutions
Dive into performance hooks when needed

React Core

Hooks

ReactDOM

Server APIs

Hooks Overview

Built-in Hooks

State Hooks

Context Hooks

Ref Hooks

Effect Hooks

Performance Hooks

Resource Hooks

Other Hooks

Rules of Hooks

Only call Hooks at the top level

Only call Hooks from React functions

Custom Hooks

Hook Call Requirements

TypeScript Support

Performance Considerations

Migration from Classes

Next Steps

​Built-in Hooks

​State Hooks

​Context Hooks

​Ref Hooks

​Effect Hooks

​Performance Hooks

​Resource Hooks

​Other Hooks

​Rules of Hooks

​Only call Hooks at the top level

​Only call Hooks from React functions

​Custom Hooks

​Hook Call Requirements

​TypeScript Support

​Performance Considerations

​Migration from Classes

​Next Steps

Built-in Hooks

State Hooks

Context Hooks

Ref Hooks

Effect Hooks

Performance Hooks

Resource Hooks

Other Hooks

Rules of Hooks

Only call Hooks at the top level

Only call Hooks from React functions

Custom Hooks

Hook Call Requirements

TypeScript Support

Performance Considerations

Migration from Classes

Next Steps