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
- Pass a function as the first argument: useSelector(state => state.counter.value)
- Check the selector import resolves to a real export; log it if unsure
- 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
- Type selectors as (state: RootState) => T with TypeScript
- Avoid default-importing selectors; use named imports so undefined exports fail the build
- Keep selector and equalityFn argument order: fn first, options second
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
- You must pass a function as an equality function to useSelec
- You must pass a function as a selector to useSelector
- could not find react-redux context value; please ensure the
- You must pass a component to the function returned by connec
- You must pass a valid React context consumer as `props.conte
AI-assisted analysis of reduxjs/react-redux@16f1a91eb2 (2026-08-31).
Data as JSON: /api/errors/ce9ff015e1ca7c2f.
Report an issue: GitHub.