useSelector is the react-redux hook that reads a specific piece of state from the Redux store, re-rendering the component whenever that specific selected value changes.

Syntax

const value = useSelector((state) => state.someSlice.someValue);

Deep Dive Course

useSelector takes a selector function, which receives the entire Redux state and returns whatever specific piece of it the component actually needs — react-redux subscribes the component to the store and, after every dispatched action, re-runs the selector and compares its new result against the previous one using reference equality by default, only triggering a re-render of the component if that specific selected value actually changed. This selective, per-value comparison is what makes useSelector generally more efficient than Context's useContext for frequently-updating state, since a component only re-renders when the exact slice of state it actually reads changes, not whenever any part of the store changes.

1Understanding useSelector

💡

Keep a useSelector selector function narrowly focused on exactly the specific piece of state a component needs, rather than returning a larger object containing extra, unrelated fields — returning a wider object means the component re-renders whenever any of those extra fields change too, even ones it doesn't actually use.

editor.html

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter.count);
  return <p>Count: {count}</p>;
}

localhost:3000

2Practical Example

Here is a real-world application of useSelector showing how it is used in production React code.

editor.html

import { useSelector } from 'react-redux';

function TodoCount() {
  const todoCount = useSelector((state) => state.todos.length);
  return <p>You have {todoCount} todos.</p>;
}

localhost:3000

3Best Practices

Follow these guidelines when working with useSelector:

1. Write narrow, focused selector functions that return only the specific value(s) a component actually needs, to minimize unnecessary re-renders from unrelated state changes

2. Use a memoized selector, like one created with Reselect's createSelector, for a selector that performs a genuinely expensive computation over the state

3. Avoid creating a brand-new object or array inside a selector's return value on every call, since useSelector's default reference-equality check would then see a change on every single dispatch regardless of whether the underlying data changed

⚠️

Tip: Keep a useSelector selector function narrowly focused on exactly the specific piece of state a component needs, rather than returning a larger object containing extra, unrelated fields — returning a wider object means the component re-renders whenever any of those extra fields change too, even ones it doesn't actually use.

editor.html

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter.count);
  return <p>Count: {count}</p>;
}

localhost:3000

Examples

Example 01Basic Usage

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter.count);
  return <p>Count: {count}</p>;
}

Example 02Advanced Example

import { useSelector } from 'react-redux';

function TodoCount() {
  const todoCount = useSelector((state) => state.todos.length);
  return <p>You have {todoCount} todos.</p>;
}

Best Practices

Write narrow, focused selector functions that return only the specific value(s) a component actually needs, to minimize unnecessary re-renders from unrelated state changes
Use a memoized selector, like one created with Reselect's createSelector, for a selector that performs a genuinely expensive computation over the state
Avoid creating a brand-new object or array inside a selector's return value on every call, since useSelector's default reference-equality check would then see a change on every single dispatch regardless of whether the underlying data changed

Interview Question

Why is useSelector generally more efficient than reading the entire Redux state through Context and useContext for a component that only needs one specific value?▼

Hint: Think about what triggers a re-render in each approach — any change to the shared value at all, versus a change specifically to the exact piece of data a component reads.

A component reading shared state via useContext re-renders whenever the context's overall value changes at all, since useContext has no mechanism to look inside that value and determine whether the specific properties the component actually cares about were among the parts that changed — it treats the whole value as one indivisible unit for change-detection purposes. useSelector, by contrast, runs its selector function after every dispatched action and specifically compares only the selected result's new value against its previous one, triggering a re-render solely when that particular selected value actually changed, completely ignoring changes to any other, unrelated parts of the store's state. This selector-based, per-value comparison is exactly what lets many different components each subscribe to their own narrow slice of a single large, frequently-updating store without each one re-rendering on every single unrelated state change elsewhere in that same store, a level of granularity plain Context and useContext don't provide out of the box.

Exercises

MediumPractice using useSelector in a real scenario.

View Solution

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter.count);
  return <p>Count: {count}</p>;
}

Frequently Asked Questions

Why is useSelector generally more efficient than reading the entire Redux state through Context and useContext for a component that only needs one specific value?▼

Related Functions

usedispatchstoreusecontext