shallowEqual with useSelector in React Redux

A selector that builds a new object on every call makes useSelector see a change after every action. shallowEqual compares the fields instead, so the component only re-renders when a field changes.

All React Redux examples React Redux: usage and stats

shallowEqual with useSelector in React Redux: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

A selector that returns an object. selectUserCard returns a fresh { name, role } object each time it runs. Both panels use this same selector. [1]
Reference check on dispatch. The tick action changes only state.ticks. The left panel uses the default comparison, so it re-renders on every tick. [1]
Pass shallowEqual. The right panel passes shallowEqual as the second argument. Its render count only grows when you rename the user. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { useRef } from "react";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch, shallowEqual } from "react-redux";

const initialState = { user: { name: "Ada", role: "admin" }, ticks: 0 };

function reducer(state = initialState, action) {
  if (action.type === "tick") return { ...state, ticks: state.ticks + 1 };
  if (action.type === "rename") {
    const name = state.user.name === "Ada" ? "Grace" : "Ada";
    return { ...state, user: { ...state.user, name } };
  }
  return state;
}

const store = createStore(reducer);

// Builds a new object on every call
const selectUserCard = (state) => ({ name: state.user.name, role: state.user.role });

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#1e1e1e", color: "#e5e7eb", border: "1px solid #333", borderRadius: 12,
  padding: "18px 22px", boxSizing: "border-box" };
const btn = { padding: "6px 12px", borderRadius: 8, border: "1px solid #444", background: "#2a2a2a",
  color: "#f3f4f6", fontSize: 14, cursor: "pointer" };

function Panel({ title, equalityFn }) {
  const renders = useRef(0);
  renders.current += 1;
  const user = useSelector(selectUserCard, equalityFn);
  return (
    <div style={{ ...card, width: 250 }}>
      <code style={{ fontSize: 12, color: "#93c5fd" }}>{title}</code>
      <p style={{ margin: "10px 0 4px", fontSize: 17 }}>{user.name} ({user.role})</p>
      <p style={{ margin: 0, color: "#fbbf24" }}>renders: {renders.current}</p>
    </div>
  );
}

function Controls() {
  const ticks = useSelector((state) => state.ticks);
  const dispatch = useDispatch();
  return (
    <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 14 }}>
      <button style={btn} onClick={() => dispatch({ type: "tick" })}>Unrelated action ({ticks})</button>
      <button style={btn} onClick={() => dispatch({ type: "rename" })}>Rename user</button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <div style={{ ...page, flexDirection: "column" }}>
        <div style={{ display: "flex", gap: 12 }}>
          <Panel title="useSelector(selector)" />
          <Panel title="useSelector(selector, shallowEqual)" equalityFn={shallowEqual} />
        </div>
        <Controls />
      </div>
    </Provider>
  );
}

Ctrl/⌘ + Enter runs

Click the unrelated action a few times and compare the two render counts. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-redux 9.3.0, react 19.3.0, react-dom 19.3.0, redux 5.0.1. Needs WebGL.

More React Redux examples

Provider in React Redux useSelector and useDispatch counter in React Redux Selecting by prop with useSelector in React Redux Derived values with useSelector in React Redux

Sources

Docs: api › hooks

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Redux? Ask AgentGid →