react state_management_error ai_generated true

TypeError: dispatch is not a function

ID: react/react-reducer-dispatch-error

Also available as: JSON · Markdown
90%Fix Rate
92%Confidence
90Evidence
2022-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

useReducer dispatch function is undefined or not a function. Usually caused by destructuring useReducer return incorrectly, using dispatch from a Context that has no Provider, or passing dispatch to a child that receives it as a different prop name.

generic

Workarounds

  1. 93% success Verify useReducer destructuring: const [state, dispatch] = useReducer(reducer, initialState) 
    Ensure the return value is destructured correctly. Common mistake: const [dispatch, state] = useReducer(...) (swapped order).

    Sources: https://react.dev/reference/react/useReducer

  2. 90% success When using dispatch from Context, ensure the Provider passes dispatch and is an ancestor of the consumer 
    const DispatchContext = createContext(null); function App() { const [state, dispatch] = useReducer(reducer, init); return <DispatchContext.Provider value={dispatch}><Child /></DispatchContext.Provider>; }

    Sources: https://react.dev/learn/scaling-up-with-reducer-and-context

Dead Ends

Common approaches that don't work:

  1. Wrap dispatch calls in a try-catch to suppress the error 85% fail

    The state update is silently lost; the UI becomes stale and unresponsive. The root cause (missing dispatch reference) is not addressed.

  2. Replace useReducer with multiple useState calls 50% fail

    Loses the benefits of a reducer pattern (centralized state logic, action-based updates). Does not fix the structural issue of how dispatch is passed around.

Error Chain

Leads to:
Preceded by:
Frequently confused with: