🎣 useSelector and useDispatch Hooks

Two Hooks, One Loop

Every interaction in a React-Redux app is the same round trip. A component reads state with useSelector to render. Something happens — a click, a fetch — and the component dispatches an action with useDispatch. The reducer produces new state, the store notifies subscribers, and any component whose selected value changed re-renders with fresh data.

useSelector In-Depth

A selector is just a function (state) => value. The cleanest ones read a single slice; the value you return is what the component gets and what re-render decisions are based on.

Basic and multiple selects

import { useSelector } from 'react-redux';

function UserProfile() {
  const user = useSelector((state) => state.user);
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function Dashboard() {
  // Prefer several narrow selectors over one big object.
  const name          = useSelector((state) => state.user.name);
  const notifications = useSelector((state) => state.notifications);
  const isLoading     = useSelector((state) => state.ui.isLoading);

  if (isLoading) return <p>Loading…</p>;
  return (
    <div>
      <h1>Welcome, {name}</h1>
      <NotificationList items={notifications} />
    </div>
  );
}

Computed values inside a selector

A selector can derive a value rather than return a raw slice. When the derived value is a primitive (a number, string, boolean), reference equality just works — the component re-renders only when the number itself changes.

function CartCount() {
  // Returns a number → safe to compute inline; === compares by value.
  const totalItems = useSelector((state) =>
    state.cart.items.reduce((sum, item) => sum + item.quantity, 0)
  );
  return <span>{totalItems} items</span>;
}

Selecting with a prop

A component often needs one item out of a collection, keyed by a prop. Read the whole collection in the selector's closure and pick the item you need:

function TodoItem({ todoId }) {
  const todo = useSelector((state) =>
    state.todos.find((t) => t.id === todoId)
  );
  if (!todo) return null;
  return (
    <label>
      <input type="checkbox" checked={todo.completed} readOnly />
      {todo.text}
    </label>
  );
}

Re-render & Equality Rules

Here's the single most important thing to internalize: after every dispatched action, React-Redux runs your selector and compares the new result to the previous one. By default that comparison is === (reference equality). If the result is === to last time, the component does not re-render.

The classic mistake — and three fixes

// ❌ New object literal every render → always !== → re-renders constantly
const data = useSelector((state) => ({
  user:  state.user,
  posts: state.posts,
}));

// ✅ Fix 1 — separate selectors (each returns a stable slice)
const user  = useSelector((state) => state.user);
const posts = useSelector((state) => state.posts);

// ✅ Fix 2 — shallowEqual compares the object field-by-field
import { shallowEqual } from 'react-redux';
const data2 = useSelector(
  (state) => ({ user: state.user, posts: state.posts }),
  shallowEqual
);

// ✅ Fix 3 — memoize with createSelector (see next section)

Memoized & Parameterized Selectors

When a selector derives data — filtering, mapping, sorting, summing — recomputing on every store change wastes work and, worse, produces a new array/object reference each time (defeating ===). Reselect's createSelector (re-exported by Redux Toolkit) caches the last result and only recomputes when its input selectors return something new.

A memoized summary selector

import { createSelector } from '@reduxjs/toolkit';

// Input selectors — cheap, just read slices.
const selectItems   = (state) => state.cart.items;
const selectTaxRate = (state) => state.config.taxRate;

// Result function only runs when items OR taxRate changes.
// Otherwise the SAME { subtotal, tax, total } object is returned.
const selectCartSummary = createSelector(
  [selectItems, selectTaxRate],
  (items, taxRate) => {
    const subtotal = items.reduce((s, i) => s + i.price * i.quantity, 0);
    const tax = subtotal * taxRate;
    return { subtotal, tax, total: subtotal + tax };
  }
);

function CartSummary() {
  const { subtotal, tax, total } = useSelector(selectCartSummary);
  return (
    <div>
      <p>Subtotal: ${subtotal.toFixed(2)}</p>
      <p>Tax: ${tax.toFixed(2)}</p>
      <strong>Total: ${total.toFixed(2)}</strong>
    </div>
  );
}

Parameterized selectors (passing an argument)

A memoized selector can take a second argument — useful for "give me the todos matching this filter":

const selectFilteredTodos = createSelector(
  [(state) => state.todos, (state, filter) => filter],
  (todos, filter) => {
    switch (filter) {
      case 'completed': return todos.filter((t) => t.completed);
      case 'active':    return todos.filter((t) => !t.completed);
      default:          return todos;
    }
  }
);

function TodoList({ filter }) {
  const todos = useSelector((state) => selectFilteredTodos(state, filter));
  return <ul>{todos.map((t) => <li key={t.id}>{t.text}</li>)}</ul>;
}

import { useMemo } from 'react';

const makeSelectItemById = () => createSelector(
  [(state) => state.items, (state, id) => id],
  (items, id) => items.find((item) => item.id === id)
);

function ItemRow({ itemId }) {
  // One selector instance per mounted ItemRow → each keeps its own cache.
  const selectItemById = useMemo(makeSelectItemById, []);
  const item = useSelector((state) => selectItemById(state, itemId));
  return item ? <div>{item.name}</div> : null;
}

useDispatch In-Depth

useDispatch() returns the store's dispatch function. You call it with an action — either a plain object or (more commonly) the result of an action creator.

Basic dispatch

import { useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './todoSlice';

function TodoControls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(addTodo('Write tests'))}>Add</button>
      <button onClick={() => dispatch(toggleTodo(1))}>Toggle #1</button>
    </div>
  );
}

Async dispatch with a thunk

To dispatch an asynchronous flow (like a fetch), you dispatch a thunk — a function of dispatch — which the thunk middleware runs. You'll formalize this in the middleware lesson; here's the shape:

// A thunk action creator: returns a function instead of a plain object.
const fetchTodos = () => async (dispatch) => {
  dispatch({ type: 'todos/fetchStart' });
  try {
    const res = await fetch('/api/todos');
    const data = await res.json();
    dispatch({ type: 'todos/fetchSuccess', payload: data });
  } catch (err) {
    dispatch({ type: 'todos/fetchFailure', payload: err.message });
  }
};

function TodoLoader() {
  const dispatch = useDispatch();
  const isLoading = useSelector((state) => state.todos.isLoading);

  return (
    <div>
      <button onClick={() => dispatch(fetchTodos())} disabled={isLoading}>
        {isLoading ? 'Loading…' : 'Load Todos'}
      </button>
    </div>
  );
}

useEffect(() => {
  dispatch(fetchTodos());
}, [dispatch]); // dispatch is stable → effect runs once on mount

Custom Hooks with Redux

Because useSelector and useDispatch are just hooks, you can compose them into your own. A custom hook bottles up a feature's state and actions behind one clean call — the single best way to keep components tidy and share Redux logic.

import { useSelector, useDispatch } from 'react-redux';
import { useCallback } from 'react';
import { login, logout } from './authSlice';

// Everything a component needs to know about auth, in one hook.
function useAuth() {
  const user = useSelector((state) => state.auth.user);
  const isLoading = useSelector((state) => state.auth.isLoading);
  const error = useSelector((state) => state.auth.error);
  const dispatch = useDispatch();

  const signIn  = useCallback((creds) => dispatch(login(creds)), [dispatch]);
  const signOut = useCallback(() => dispatch(logout()), [dispatch]);

  return { user, isLoading, error, signIn, signOut };
}

// Usage — the component never touches the store directly.
function LoginButton() {
  const { user, isLoading, signIn, signOut } = useAuth();
  if (user) return <button onClick={signOut}>Sign out {user.name}</button>;
  return (
    <button onClick={() => signIn({ demo: true })} disabled={isLoading}>
      {isLoading ? 'Signing in…' : 'Sign in'}
    </button>
  );
}

The same idea scales to useCart, usePosts, useNotifications — each pairs the relevant selectors with the actions that change them.

Practice & Quiz

function ProfileHeader() {
  const { name, avatar } = useSelector((state) => ({
    name:   state.user.name,
    avatar: state.user.avatar,
  }));
  return <img src={avatar} alt={name} />;
}

// Fix A — separate selectors, each returns a stable primitive/slice
function ProfileHeader() {
  const name   = useSelector((state) => state.user.name);
  const avatar = useSelector((state) => state.user.avatar);
  return <img src={avatar} alt={name} />;
}

// Fix B — keep the object, but compare it shallowly
import { shallowEqual } from 'react-redux';
function ProfileHeader() {
  const { name, avatar } = useSelector(
    (state) => ({ name: state.user.name, avatar: state.user.avatar }),
    shallowEqual
  );
  return <img src={avatar} alt={name} />;
}

import { useSelector, useDispatch } from 'react-redux';
import { createSelector } from '@reduxjs/toolkit';
import { useCallback } from 'react';
import { addItem } from './cartSlice';

const selectItems = (state) => state.cart.items;
const selectTotal = createSelector([selectItems], (items) =>
  items.reduce((sum, i) => sum + i.price * i.quantity, 0)
);
const selectCount = createSelector([selectItems], (items) =>
  items.reduce((sum, i) => sum + i.quantity, 0)
);

export function useCart() {
  const count = useSelector(selectCount);
  const total = useSelector(selectTotal);
  const dispatch = useDispatch();
  const add = useCallback((product) => dispatch(addItem(product)), [dispatch]);
  return { count, total, add };
}

Best Practices & Pitfalls

✅ Do

• Return primitives or stable slices from selectors whenever possible
• Use shallowEqual when a selector must return an object of several fields
• Memoize derived data with createSelector; use a factory for per-item selectors
• Wrap feature logic in custom hooks (useAuth, useCart) for clean, testable components
• Treat dispatch as stable and list it in dependency arrays as the linter suggests

❌ Don't

• Don't return a new object/array literal from useSelector without shallowEqual or memoization
• Don't share one createSelector instance across components that pass different arguments — use a factory
• Don't do heavy computation inline in a selector on every render — memoize it
• Don't reach for useStore to read state; useSelector subscribes correctly and useStore does not
• Don't mutate the value you get back from useSelector — it's the live state; treat it as read-only

Summary

📚 Additional Resources

• React-Redux — Hooks API reference
• React-Redux — useSelector in detail
• React-Redux — useDispatch recipes
• Redux — Deriving Data with Selectors (Reselect)

🚀 What's Next?

You've been wrapping your app in <Provider> without dwelling on how it works. The next lesson, Provider component, opens the hood: how it uses React Context, where to place it, SSR and testing setups, and the store-stability rules that keep everything humming.