React Hooks Fundamentals: Rules, Core Hooks, and Custom Hooks

React Hooks enable functional components to manage state and side effects. Introduced in React 16.8 (February 2019), hooks replaced class components as the recommended approach for most use cases. This article covers the architectural principles, core hooks, and patterns for building production applications.

React 19 hook categories. State hooks manage component data; effect hooks synchronize with external systems; performance hooks optimize rendering.

Abstract

Hooks solve three problems that plagued class components: logic fragmentation across lifecycle methods, wrapper hell from HOCs (Higher-Order Components) and render props, and the cognitive overhead of JavaScript’s this binding.

The core mental model:

Hooks are call-order dependent: React stores hook state in a linked list, using call position (not names) to associate state with hooks. This enables custom hooks to have independent state without key collisions.
Effects are synchronization, not lifecycle: useEffect keeps external systems in sync with React state. Think “synchronize chat connection with roomId” not “run code on mount.”
Memoization breaks render cascades: useMemo and useCallback preserve referential equality to prevent unnecessary re-renders of memoized children—not to optimize individual calculations.
Custom hooks compose without collision: Because each hook call gets its own slot in the linked list, two hooks using the same internal hook don’t conflict.

As of React 19 (December 2024), new hooks like useActionState, useOptimistic, and the use API extend hooks to handle async data and form actions natively.

Why Hooks Exist: The Class Component Problems

Before React 16.8, class components had three architectural problems that hooks were designed to solve:

1. Logic Fragmentation: A single concern (like a data subscription) was scattered across componentDidMount (setup), componentDidUpdate (sync on prop change), and componentWillUnmount (cleanup). Hooks co-locate related logic in a single useEffect call.

2. Wrapper Hell: HOCs and render props solved reuse but created deeply nested hierarchies (the “pyramid of doom”) that were hard to debug. Custom hooks extract logic without adding wrapper components.

3. this Binding: Class methods required explicit binding or arrow function class properties. Hooks eliminate this entirely—components are just functions.

Design rationale: The React team considered alternatives like mixins (rejected due to the “diamond problem” of conflicting method names) and render props (rejected because they still add nesting). Hooks’ call-order design naturally avoids these issues. See Dan Abramov’s “Why Do Hooks Rely on Call Order?” for the full reasoning.

The Rules of Hooks: Why Call Order Matters

Hooks have two rules that stem from a single implementation decision: React tracks hook state in a linked list indexed by call order, not by name.

Rule 1: Only Call Hooks at the Top Level

React associates useState(0) with “the first hook call” and useState("") with “the second hook call.” If the order changes between renders, state gets misassigned.


2 collapsed lines
1
// ❌ Conditional hook call: order changes when `condition` flips
2
function BadComponent({ condition }) {
3
  const [count, setCount] = useState(0) // Always slot 0
4

5
  if (condition) {
6
    useEffect(() => console.log("effect")) // Sometimes slot 1
7
  }
8

9
  const [name, setName] = useState("") // Slot 1 or 2 depending on condition
10
}

When condition changes from true to false, React expects slot 1 to be useEffect but finds useState—state corruption occurs.


2 collapsed lines
1
// ✅ Condition inside the hook, not around it
2
function GoodComponent({ condition }) {
3
  const [count, setCount] = useState(0) // Always slot 0
4
  const [name, setName] = useState("") // Always slot 1
5

6
  useEffect(() => {
7
    if (condition) console.log("effect") // Always slot 2
8
  }, [condition])
9
}

Why this design? The React team evaluated alternatives:

String keys: Name collisions when composing hooks (two hooks using the same internal state key)
Symbol keys: Can’t call the same hook twice (both calls share one Symbol)
Manual composition: Forces developers to manage keys through all layers

Call order solves all three: each call gets its own slot, no keys needed, no collisions.

Rule 2: Only Call Hooks from React Functions

Hooks can only be called from function components or custom hooks (functions starting with use). This ensures React is in the middle of rendering when hooks are called, so it can properly track state.

The eslint-plugin-react-hooks plugin enforces both rules statically.

Core Hooks

useState: State as a Snapshot

useState adds local state to a component. The setter triggers a re-render with the new value.

1
const [count, setCount] = useState(0) // Returns [currentValue, setter]

Critical behavior: State is a snapshot frozen at render time. The setter queues a re-render; it doesn’t mutate immediately.


2 collapsed lines
1
// Each click only increments by 1, not 3
2
function Counter() {
3
  const [count, setCount] = useState(0)
4

5
  function handleClick() {
6
    setCount(count + 1) // Queues: set to 0 + 1
7
    setCount(count + 1) // Queues: set to 0 + 1 (count is still 0!)
8
    setCount(count + 1) // Queues: set to 0 + 1
9
  }
10
}

Functional updates solve the stale closure problem by receiving the latest state:


2 collapsed lines
1
// Each call sees the updated value—increments by 3
2
function Counter() {
3
  const [count, setCount] = useState(0)
4

5
  function handleClick() {
6
    setCount((c) => c + 1) // 0 → 1
7
    setCount((c) => c + 1) // 1 → 2
8
    setCount((c) => c + 1) // 2 → 3
9
  }
10
}

Object state: React uses Object.is to detect changes. Mutating an object and calling the setter won’t trigger a re-render because the reference hasn’t changed.

1
// ❌ Mutation: React sees same reference, skips re-render
2
obj.x = 10
3
setObj(obj)
4

5
// ✅ Replacement: new reference triggers re-render
6
setObj({ ...obj, x: 10 })

Lazy initialization: Pass a function (not its result) when the initial value is expensive to compute. React only calls it on the first render.

1
// ❌ createTodos() runs every render (result ignored after first)
2
const [todos, setTodos] = useState(createTodos())
3

4
// ✅ createTodos only runs once
5
const [todos, setTodos] = useState(createTodos)

useReducer: Centralized State Transitions

useReducer extracts state update logic into a pure function. Useful when state transitions are complex or interdependent.

1
const [state, dispatch] = useReducer(reducer, initialState)

When to choose useReducer over useState:

Scenario	useState	useReducer
Independent values	✅ Simpler	Overkill
Interdependent state (form with validation)	Scattered logic	✅ Centralized
Complex transitions (state machine)	Hard to follow	✅ Explicit actions
Testing state logic	Coupled to component	✅ Pure function


14 collapsed lines
1
type FormState = {
2
  email: string
3
  password: string
4
  errors: Record<string, string>
5
  isSubmitting: boolean
6
}
7

8
type FormAction =
9
  | { type: "SET_FIELD"; field: string; value: string }
10
  | { type: "SET_ERRORS"; errors: Record<string, string> }
11
  | { type: "SUBMIT_START" }
12
  | { type: "SUBMIT_END" }
13
  | { type: "RESET" }
14

15
const initialState: FormState = {
16
  email: "",
17
  password: "",
18
  errors: {},
19
  isSubmitting: false,
20
}
21

22
function formReducer(state: FormState, action: FormAction): FormState {
23
  switch (action.type) {
24
    case "SET_FIELD":
25
      return { ...state, [action.field]: action.value, errors: {} }
5 collapsed lines
26
    case "SET_ERRORS":
27
      return { ...state, errors: action.errors, isSubmitting: false }
28
    case "SUBMIT_START":
29
      return { ...state, isSubmitting: true, errors: {} }
30
    case "SUBMIT_END":
31
      return { ...state, isSubmitting: false }
32
    case "RESET":
33
      return initialState
34
  }
35
}

The reducer is a pure function—easy to unit test without rendering a component.

useEffect: Synchronization, Not Lifecycle

Mental model shift: Don’t think “run on mount/unmount.” Think “synchronize external system X with React state Y.”


2 collapsed lines
1
// "Keep chat connection in sync with roomId"
2
function ChatRoom({ roomId }) {
3
  useEffect(() => {
4
    const connection = createConnection(roomId)
5
    connection.connect()
6
    return () => connection.disconnect() // Cleanup before re-sync
7
  }, [roomId]) // Re-sync when roomId changes
8
}

When roomId changes: cleanup runs (disconnect old room) → setup runs (connect new room). This is synchronization, not lifecycle.

Dependency array behavior:

1
useEffect(() => { ... })           // Re-runs after every render (rare)
2
useEffect(() => { ... }, [])       // Runs once after initial render
3
useEffect(() => { ... }, [a, b])   // Re-runs when a or b changes (Object.is)

Common bugs:

Bug	Cause	Fix
Stale closure	Missing dependency	Add to array or use functional update
Infinite loop	Object/function in deps recreated each render	`useMemo`/`useCallback` or move inside effect
Memory leak	No cleanup for subscription/timer	Return cleanup function
Race condition	Async result applied after newer request	Use `ignore` flag pattern


2 collapsed lines
1
// Race condition fix: ignore stale responses
2
function Profile({ userId }) {
3
  const [user, setUser] = useState(null)
4

5
  useEffect(() => {
6
    let ignore = false
7
    fetchUser(userId).then((data) => {
8
      if (!ignore) setUser(data) // Only apply if still current
9
    })
10
    return () => {
11
      ignore = true
12
    }
13
  }, [userId])
14
}

Strict Mode double-invocation: In development, React mounts → unmounts → mounts components to surface missing cleanup. If your effect breaks on remount, it’s missing cleanup.

useRef: Mutable Values Outside the Render Cycle

useRef returns a mutable object { current: value } that persists across renders without triggering re-renders when mutated.

Two use cases:

DOM access: Get a reference to a DOM node
Instance variables: Store values that shouldn’t trigger re-renders (timers, previous values, flags)


2 collapsed lines
1
// DOM reference for imperative focus
2
function TextInput() {
3
  const inputRef = useRef<HTMLInputElement>(null)
4
  return (
5
    <>
6
      <input ref={inputRef} />
7
      <button onClick={() => inputRef.current?.focus()}>Focus</button>
8
    </>
9
  )
10
}


2 collapsed lines
1
// Store interval ID without causing re-renders
2
function Timer() {
3
  const intervalRef = useRef<NodeJS.Timeout>()
4

5
  useEffect(() => {
6
    intervalRef.current = setInterval(() => console.log("tick"), 1000)
7
    return () => clearInterval(intervalRef.current)
8
  }, [])
9
}

Key distinction from state: Mutating ref.current doesn’t schedule a re-render. Use state when the UI should reflect the value; use refs for values that don’t affect rendering.

Performance Hooks: Memoization

The Referential Equality Problem

Objects and functions are recreated on every render. If passed to a memo()-wrapped child, the child re-renders because {} !== {}.


2 collapsed lines
1
// Child re-renders on every parent render, even if props are "the same"
2
function Parent() {
3
  const [count, setCount] = useState(0)
4
  const style = { color: "blue" } // New object each render
5
  const onClick = () => console.log("hi") // New function each render
6
  return <MemoizedChild style={style} onClick={onClick} />
7
}

useMemo: Cache Expensive Values

useMemo caches a computed value until dependencies change.

1
const filtered = useMemo(() => items.filter((item) => item.matches(query)), [items, query])

When to use:

Expensive calculations: Filter/map over large arrays, complex transformations (>1ms)
Referential equality for props: Prevent re-renders of memoized children
Dependencies of other hooks: Stable object reference for useEffect deps

When NOT to use: Simple calculations like a + b. The overhead of memoization exceeds the cost.

useCallback: Cache Functions

useCallback is useMemo for functions: useCallback(fn, deps) ≡ useMemo(() => fn, deps).


2 collapsed lines
1
// Stable function reference for memoized child
2
function Parent() {
3
  const [count, setCount] = useState(0)
4

5
  const handleClick = useCallback(() => {
6
    setCount((c) => c + 1) // Updater function avoids `count` dependency
7
  }, [])
8

9
  return <MemoizedButton onClick={handleClick} />
10
}

When to use: Functions passed to memo()-wrapped children or used as useEffect dependencies.

React Compiler (React 19+)

The React Compiler (currently opt-in) auto-memoizes values and functions at compile time. When widely adopted, manual useMemo/useCallback will be unnecessary in most cases.

Custom Hooks

Custom hooks extract reusable stateful logic. A function starting with use that calls other hooks is a custom hook.

Design principles:

Single responsibility: One hook, one concern
Composition: Build complex hooks from simpler hooks
Stable API: Consistent return shape across versions


2 collapsed lines
1
// Compose focused hooks rather than building monoliths
2
function useUserData(userId: string) {
3
  const { data, error, isLoading } = useFetch(`/api/users/${userId}`)
4
  const cached = useCache(data, `user-${userId}`)
5
  return { user: cached ?? data, error, isLoading }
6
}

Each hook call gets its own state slot—no conflicts even if two hooks internally use useState.

Production Custom Hooks

usePrevious: Track Previous Values

Returns the value from the previous render. Useful for comparisons, animations, and change detection.


2 collapsed lines
1
import { useEffect, useRef } from "react"
2

3
export function usePrevious<T>(value: T): T | undefined {
4
  const ref = useRef<T>()
5
  useEffect(() => {
6
    ref.current = value
7
  }, [value])
8
  return ref.current // Returns previous value during render
9
}

How it works: useRef stores the value outside the render cycle. useEffect updates the ref after render, so during render we still see the old value.

Edge cases:

First render: returns undefined
Concurrent features: safe because refs are instance-specific

useDebounce: Delay Rapid Updates

Delays updating a value until input stops for a specified duration. Common for search inputs.


2 collapsed lines
1
import { useState, useEffect } from "react"
2

3
export function useDebounce<T>(value: T, delay = 500): T {
4
  const [debouncedValue, setDebouncedValue] = useState(value)
5

6
  useEffect(() => {
7
    const timer = setTimeout(() => setDebouncedValue(value), delay)
8
    return () => clearTimeout(timer)
9
  }, [value, delay])
10

11
  return debouncedValue
12
}

Usage:


2 collapsed lines
1
function Search() {
2
  const [query, setQuery] = useState("")
3
  const debouncedQuery = useDebounce(query, 300)
4

5
  useEffect(() => {
6
    if (debouncedQuery) fetchResults(debouncedQuery)
7
  }, [debouncedQuery])
8
}

Edge cases:

Component unmount: cleanup clears pending timer
Delay changes: timer resets with new duration

useFetch: Data Fetching with Cancellation

Handles loading states, errors, and request cancellation via AbortController.


4 collapsed lines
1
import { useEffect, useReducer, useRef, useCallback } from "react"
2

3
type State<T> = { data: T | null; error: Error | null; isLoading: boolean }
4
type Action<T> = { type: "start" } | { type: "success"; data: T } | { type: "error"; error: Error }
5

6
function reducer<T>(state: State<T>, action: Action<T>): State<T> {
7
  switch (action.type) {
8
    case "start":
9
      return { ...state, isLoading: true, error: null }
10
    case "success":
11
      return { data: action.data, isLoading: false, error: null }
12
    case "error":
13
      return { ...state, isLoading: false, error: action.error }
14
  }
15
}
16

17
export function useFetch<T>(url: string | null) {
18
  const [state, dispatch] = useReducer(reducer<T>, { data: null, error: null, isLoading: false })
19
  const abortRef = useRef<AbortController>()
16 collapsed lines
20

21
  useEffect(() => {
22
    if (!url) return
23

24
    abortRef.current?.abort()
25
    const controller = new AbortController()
26
    abortRef.current = controller
27

28
    dispatch({ type: "start" })
29

30
    fetch(url, { signal: controller.signal })
31
      .then((res) => (res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`))))
32
      .then((data) => dispatch({ type: "success", data }))
33
      .catch((err) => {
34
        if (err.name !== "AbortError") dispatch({ type: "error", error: err })
35
      })
36

37
    return () => controller.abort()
38
  }, [url])
39

40
  return state
41
}

Key behaviors:

Cancels in-flight request when URL changes or component unmounts
Ignores AbortError to avoid spurious error states
Uses reducer for atomic state transitions

useLocalStorage: Persistent State

Syncs state with localStorage, handling SSR (Server-Side Rendering), serialization errors, and cross-tab updates.


3 collapsed lines
1
import { useState, useEffect, useCallback } from "react"
2

3
export function useLocalStorage<T>(key: string, initialValue: T): [T, (v: T | ((p: T) => T)) => void] {
4
  const [value, setValue] = useState<T>(() => {
5
    if (typeof window === "undefined") return initialValue
6
    try {
7
      const item = localStorage.getItem(key)
8
      return item ? JSON.parse(item) : initialValue
9
    } catch {
10
      return initialValue
11
    }
12
  })
13

14
  const setStoredValue = useCallback(
15
    (newValue: T | ((prev: T) => T)) => {
16
      setValue((prev) => {
17
        const resolved = newValue instanceof Function ? newValue(prev) : newValue
13 collapsed lines
18
        try {
19
          localStorage.setItem(key, JSON.stringify(resolved))
20
        } catch {}
21
        return resolved
22
      })
23
    },
24
    [key],
25
  )
26

27
  // Sync across tabs
28
  useEffect(() => {
29
    const handler = (e: StorageEvent) => {
30
      if (e.key === key && e.newValue) {
31
        try {
32
          setValue(JSON.parse(e.newValue))
33
        } catch {}
34
      }
35
    }
36
    window.addEventListener("storage", handler)
37
    return () => window.removeEventListener("storage", handler)
38
  }, [key])
39

40
  return [value, setStoredValue]
41
}

Edge cases:

SSR: Returns initialValue when window is undefined
JSON errors: Falls back to initial value
Cross-tab sync: storage event fires when other tabs modify the same key

useIntersectionObserver: Viewport Detection

Detects when elements enter/leave the viewport. Replaces inefficient scroll listeners.


5 collapsed lines
1
import { useEffect, useRef, useState, useCallback } from "react"
2

3
interface Options {
4
  threshold?: number
5
  rootMargin?: string
6
  freezeOnceVisible?: boolean
7
}
8

9
export function useIntersectionObserver(options: Options = {}) {
10
  const { threshold = 0, rootMargin = "0px", freezeOnceVisible = false } = options
11
  const [isIntersecting, setIsIntersecting] = useState(false)
12
  const frozen = useRef(false)
13
  const ref = useRef<Element | null>(null)
14

15
  const setRef = useCallback(
16
    (node: Element | null) => {
17
      if (ref.current) return // Already observing
18
      ref.current = node
19
      if (!node) return
20

21
      const observer = new IntersectionObserver(
7 collapsed lines
22
        ([entry]) => {
23
          if (frozen.current) return
24
          if (freezeOnceVisible && entry.isIntersecting) frozen.current = true
25
          setIsIntersecting(entry.isIntersecting)
26
        },
27
        { threshold, rootMargin },
28
      )
29

30
      observer.observe(node)
31
      return () => observer.disconnect()
32
    },
33
    [threshold, rootMargin, freezeOnceVisible],
34
  )
35

36
  return [setRef, isIntersecting] as const
37
}

Usage: Lazy-load images when they enter viewport:


2 collapsed lines
1
function LazyImage({ src }: { src: string }) {
2
  const [ref, isVisible] = useIntersectionObserver({ freezeOnceVisible: true })
3
  return <img ref={ref} src={isVisible ? src : ""} />
4
}

React 19 Hooks

React 19 (December 2024) introduces hooks for form handling and optimistic updates:

Hook	Purpose
`useActionState`	Manages form submission state, errors, and pending status
`useFormStatus`	Reads parent `<form>` status without prop drilling
`useOptimistic`	Shows optimistic UI while async request completes
`use`	Reads promises/context during render (can follow early returns)


2 collapsed lines
1
// useActionState example
2
import { useActionState } from "react"
3

4
function Form() {
5
  const [error, submitAction, isPending] = useActionState(async (prevState, formData) => {
6
    const result = await saveData(formData)
7
    if (result.error) return result.error
8
    return null
9
  }, null)
10

11
  return (
12
    <form action={submitAction}>
13
      <button disabled={isPending}>Submit</button>
14
      {error && <p>{error}</p>}
15
    </form>
16
  )
17
}

The React Compiler (opt-in in React 19) will auto-memoize values and functions, reducing the need for manual useMemo/useCallback.

Conclusion

Hooks solve class component problems through a single mechanism: call-order-based state tracking. Master the core hooks (useState, useEffect, useRef), understand their mental models (snapshots, synchronization, mutable refs), and compose custom hooks for reusable logic.

Appendix

Prerequisites

React functional components
JavaScript closures and reference equality
Basic TypeScript (for typed examples)

Terminology

Term	Definition
Hook	Function starting with `use` that accesses React state or lifecycle
Memoization	Caching computed values to avoid recalculation
Referential equality	Two values are `===` (same reference in memory)
Stale closure	Closure capturing outdated variable values
HOC	Higher-Order Component—function that wraps a component to add behavior

Summary

Hooks use call-order to track state—never call conditionally
useState returns a snapshot; use functional updates for state-dependent changes
useEffect is synchronization, not lifecycle; always return cleanup
useMemo/useCallback preserve referential equality for memoized children
Custom hooks compose without collision because each call gets its own state slot
React 19 adds useActionState, useOptimistic, and the use API for forms and async data

References

React Documentation: Hooks Reference - Official API reference for all built-in hooks
React Documentation: Rules of Hooks - Official rules and linting
Dan Abramov: Why Do Hooks Rely on Call Order? - Design rationale from React core team
React Documentation: Synchronizing with Effects - Mental model for useEffect
React Documentation: Reusing Logic with Custom Hooks - Custom hooks patterns
React 19 Release Notes - New hooks and features
React Compiler Documentation - Automatic memoization

React Hooks Fundamentals: Rules, Core Hooks, and Custom Hooks

Abstract

Why Hooks Exist: The Class Component Problems

The Rules of Hooks: Why Call Order Matters

Rule 1: Only Call Hooks at the Top Level

Rule 2: Only Call Hooks from React Functions

Core Hooks

useState: State as a Snapshot

useReducer: Centralized State Transitions

useEffect: Synchronization, Not Lifecycle

useRef: Mutable Values Outside the Render Cycle

Performance Hooks: Memoization

The Referential Equality Problem

useMemo: Cache Expensive Values

useCallback: Cache Functions

React Compiler (React 19+)

Custom Hooks

Production Custom Hooks

usePrevious: Track Previous Values

useDebounce: Delay Rapid Updates

useFetch: Data Fetching with Cancellation

useLocalStorage: Persistent State

useIntersectionObserver: Viewport Detection

React 19 Hooks

Conclusion

Appendix

Prerequisites

Terminology

Summary

References

Read more

React Rendering Architecture: Fiber, SSR, and RSC

CSRF and CORS Defense for Modern Web Applications