What does the useSelector() hook do?

ReactJunior~2 min read

The useSelector() hook is one of the two main hooks in the React-Redux library (the other is useDispatch()), and it is needed to pull data out of the Redux store inside a React component.

Definition

useSelector() is a hook that lets a React component subscribe to the Redux store and retrieve the data it needs from the state.

It replaces the old connect() HOC.

Signature

javascript

const result = useSelector(selectorFunction)

selectorFunction is a function that receives the entire Redux state and returns only the piece of data the component needs.
result is the data the component will use.

Simple example

javascript

import { useSelector, useDispatch } from 'react-redux'

function Counter() {
  const count = useSelector(state => state.counter.count)
  const dispatch = useDispatch()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  )
}

Here useSelector(state => state.counter.count):

subscribes the component to changes of the state.counter.count field;
returns the current value of count;
if count changes -> React automatically re-renders the component.

How it works under the hood

On the first render, useSelector():

calls the given selector selector(state);
saves the result.

When a dispatch() happens on the Redux store:

React-Redux compares the old and new value returned by the selector.
If the data changed (by ===), the component re-renders.
If not, the component does not re-render -> saving performance.

Example with several selectors

javascript

const user = useSelector(state => state.user)
const todos = useSelector(state => state.todos)

Each call to useSelector() subscribes only to its own slice of state.

Advanced techniques

Memoizing the selector

If the selector does computations, you can memoize it with reselect:

javascript

import { createSelector } from 'reselect'

const completedTodosSelector = createSelector(
  state => state.todos,
  todos => todos.filter(t => t.completed)
)

const completed = useSelector(completedTodosSelector)

A custom comparison function

You can pass a second argument to fine-tune exactly how results are compared (by default, strict === comparison):

javascript

const user = useSelector(state => state.user, (a, b) => a.id === b.id)

What useSelector() does internally (in short)

calls store.subscribe() to listen for updates;
calls store.getState() to get the current state;
calls the selector on every store change;
if the result changed, calls setState() -> re-renders the component.

Summary

What it does	Description
Reads data from the store	Pulls out the needed slice of state
Tracks changes	Automatically subscribes to updates
Optimizes re-renders	Re-renders the component only on real changes
Replaces connect()	The modern way to connect Redux to React

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.