Suggest an edit

Improve this article

Refine the answer for “What does the useSelector() hook do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

1. On the first render, `useSelector()`:
  - calls the given selector `selector(state)`;
  - saves the result.
2. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts467 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.