Stop Over-Rerenders: Smarter State Sharing in React with `useContextSelector`

#react #performance #redux #frontend

🚫 Problem: Global Context = Silent Performance Killer

React's Context API is often misused as global state. It works - until updates to one part of the state cause every consumer to re-render.
We ran into this on a dashboard with many components reading shared filters. One toggle = full tree re-render. Not okay.

✅ Solution: Replace useContext with useContextSelector

Install the context-selector lib:

npm install use-context-selector

Then replace:

const { filters } = useContext(AppContext);

With:

const filters = useContextSelector(AppContext, ctx => ctx.filters)

Now only the components that care about filters will re-render.

🧪 Working Example

import {
  createContext,
  useContextSelector,
  useContext,
} from 'use-context-selector';
import React, { useState } from 'react';

const AppContext = createContext(null);

function Provider({ children }) {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const value = { count, setCount, text, setText };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

function CountDisplay() {
  const count = useContextSelector(AppContext, ctx => ctx.count);
  console.log('Render: CountDisplay');
  return <div>Count: {count}</div>;
}

function TextDisplay() {
  const text = useContextSelector(AppContext, ctx => ctx.text);
  console.log('Render: TextDisplay');
  return <div>Text: {text}</div>;
}

Toggling one field no longer rerenders both. Easy win, real speed boost.

🧠 Takeaway