reduxjs/react-redux · error

You must pass a selector to useSelector

Error message

You must pass a selector to useSelector

What it means

useSelector requires a selector function to read state from the store. In development builds react-redux validates arguments and throws this when the first argument is falsy (undefined, null, false).

Source

Thrown at src/hooks/useSelector.ts:150

): UseSelector {
  const useReduxContext =
    context === ReactReduxContext
      ? useDefaultReduxContext
      : createReduxContextHook(context)

  const useSelector = <TState, Selected>(
    selector: (state: TState) => Selected,
    equalityFnOrOptions:
      | EqualityFn<NoInfer<Selected>>
      | UseSelectorOptions<NoInfer<Selected>> = {},
  ): Selected => {
    const { equalityFn = refEquality } =
      typeof equalityFnOrOptions === 'function'
        ? { equalityFn: equalityFnOrOptions }
        : equalityFnOrOptions
    if (process.env.NODE_ENV !== 'production') {
      if (!selector) {
        throw new Error(`You must pass a selector to useSelector`)
      }
      if (typeof selector !== 'function') {
        throw new Error(`You must pass a function as a selector to useSelector`)
      }
      if (typeof equalityFn !== 'function') {
        throw new Error(
          `You must pass a function as an equality function to useSelector`,
        )
      }
    }

    const reduxContext = useReduxContext()

    const { store, subscription, getServerState } = reduxContext

    const firstRun = React.useRef(true)

    const wrappedSelector = React.useCallback<typeof selector>(

View on GitHub (pinned to 16f1a91eb2)

Solutions

  1. Pass a function as the first argument: useSelector(state => state.counter.value)
  2. Check the selector import resolves to a real export; log it if unsure
  3. If using options form, put the function first: useSelector(mySelector, { equalityFn })

Example fix

// before
const value = useSelector(undefined)
// after
const value = useSelector((state: RootState) => state.counter.value)
Defensive patterns

Strategy: type-guard

Validate before calling

const selectValue = (state: RootState) => state.counter.value
if (process.env.NODE_ENV !== 'production' && typeof selectValue !== 'function') {
  throw new TypeError('useSelector requires a selector function')
}

Type guard

function isSelectorFn(v: unknown): v is (state: any) => unknown {
  return typeof v === 'function';
}
// usage
if (!isSelectorFn(mySelector)) throw new TypeError('selector must be a function')
const value = useSelector(mySelector)

Try / catch

try {
  const value = useSelector(selector)
} catch (e) {
  if (e.message.includes('pass a selector')) {
    console.error('Selector import likely resolved to undefined')
  }
  throw e
}

Prevention

When it happens

Trigger: useSelector() or useSelector(undefined), typically because the selector import resolved to undefined (wrong named export), a dynamic import wasn't awaited, or an argument was accidentally shifted (e.g. useSelector(options) instead of useSelector(fn, options)).

Common situations: Renaming/renaming-away a selector export while components still import it, default-import vs named-import confusion, copy-pasted hook call where selector was deleted.

Related errors


AI-assisted analysis of reduxjs/react-redux@16f1a91eb2 (2026-08-31). Data as JSON: /api/errors/ce9ff015e1ca7c2f. Report an issue: GitHub.