Full React Hooks Guide

React 19 + Classic

A complete reference for core hooks and the latest React 19 additions.

New in React 19

use Hook (React 19)

The 'use' hook reads the value of a resource like a Promise or Context directly in render.

Unlike useEffect, 'use' works with Suspense to handle loading states elegantly.

useActionState & useFormStatus

Modern way to handle form submission state and pending status (React 19).

useActionState tracks validation errors and results, while useFormStatus handles the loading UI.

useOptimistic

Instantly update the UI before the server operation completes.

Hello! Try sending a message.

The message appears instantly with a "Sending..." badge, followed by the actual state update 2 seconds later.

Additional Examples

useRef: Video Controls

Using useRef to directly control the HTML5 Video API.

Paused

useMemo: List Filter

Efficiently filtering a list only when the search term changes.

ReactNext.jsTailwind CSSTypeScriptJavaScriptNode.jsGraphQLPrismaPostgreSQLDockerVercelAWSFigmaReduxZustand

Random Toggle State: OFFToggle (No re-filter)

Check the console: "Filtering items..." only logs when you type, not when you click Toggle.

useCallback: Stable Props

Using useCallback to keep function references stable for memoized children.

Counter State: 0

Last Clicked: none

Note: Clicking "Increment Parent" changes parent state, but the child buttons do NOT re-render (check console) because their onClick prop remains referentially equal.

Standard Examples

useState

useState is a Hook that lets you add React state to function components.

Current Count:0

Clicking the buttons below will update the state, triggering a re-render of this component.

useEffect

useEffect lets you perform side effects in function components (e.g., data fetching, subscriptions, timers).

Timer:0s

The effect runs when the component mounts and whenever the isRunning state changes.

useContext

useContext provides a way to pass data through the component tree without having to pass props down manually at every level.

This child component is consuming context:

Hello, World!

The data is managed in the parent and accessed directly by deeply nested children.

useRef

useRef returns a mutable ref object whose .current property persists for the full lifetime of the component.

Type something here

useRef is useful for accessing DOM elements or storing values that don't trigger re-renders.

useMemo

useMemo returns a memoized value, recomputing it only when one of the dependencies has changed.

Result (slowly calculated):0

Notice how toggling the theme is instant because it doesn't trigger the slow calculation (only changing the number does).

useCallback

useCallback returns a memoized version of the callback that only changes if one of the dependencies has changed.

Number Base:

Child Component List:

Watch the console: the List child component only updates its items when the number changes, not when the theme toggles.

Implementation Notes

useMemo vs useCallback

Comparison:

useMemo: Memoizes a value (the result of a function). Use it to avoid expensive calculations on every render.
useCallback: Memoizes a function instance itself. Use it to prevent child components from re-rendering when you pass functions as props.

"Use useMemo for computing data; use useCallback for stabilizing callbacks."

Rules of Hooks

Only call Hooks at the top level: Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React functions: Call them from React function components or custom Hooks.
Naming Convention: Custom hooks must start with "use" (e.g., useAuth).