Redux Toolkit: useDispatch & useSelector

Connect React components to the Redux store while avoiding catastrophic re-render performance cliffs.

State Management6 min readConcept 12 of 22

Connecting React to Redux

useDispatch and useSelector are the two primary hooks provided by React-Redux.

useDispatch returns the store's dispatch function, allowing your components to fire actions. useSelector extracts data from the store state and subscribes the component to future updates.

The Pre-Typed Hooks Pattern

In modern Redux (v9.1.0+), the official standard is to use .withTypes<T>() to create useAppDispatch and useAppSelector inside a central hooks file.

This prevents you from having to type (state: RootState) in every single component, ensures Thunks are typed correctly, and prevents circular dependency issues between your components and your store.

Strict Equality Subscriptions

When an action is dispatched anywhere in the app, every single useSelector hook runs its selector function against the new state.

React-Redux compares the new result with the old result using strict reference equality (===). If the results are equal, the component bails out and skips rendering. If they are different, the component is forced to re-render.

Interactive Performance Lab

Use the top toolbar to dispatch actions that update different slices of the Redux state. Watch how Component B behaves based on what data its selector is extracting.

Dispatch:
Select:
import { useAppSelector, useAppDispatch } from '@/app/hooks'; export function ComponentB() { // Selector subscribes to the store.
const userName = useAppSelector(state => state.user.name);
const rootState = useAppSelector(state => state); const userName = rootState.user.name;
return (
Name: {userName}
); }
Global Redux Store
user: { name: "Alice" }
counter: 0
useSelector
Component B
Renders
Alice

Extracting a primitive value avoids re-renders when unrelated state changes.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why should you avoid `useSelector(state => state)`?

Remember this

  • Create and use useAppDispatch and useAppSelector to centralize TypeScript typings.
  • useSelector uses strict reference equality (===) to determine if a component should re-render.
  • Selecting the entire state object causes catastrophic performance issues by triggering re-renders on every action.
  • Always select the smallest piece of state possible, ideally primitive values.

Done with this concept?

Mark it complete to track your progress. No login needed.