ReactJS Design Pattern ~Context Selector~

Source: Dev.to

Context Selector Pattern

• The Context pattern keeps track of a specific piece of state using useContextSelector, unlike useContext. This prevents unnecessary re‑rendering when other pieces of state change.

Example Implementation

import { useState, useEffect } from "react";
import {
  createContext,
  useContext,
  useContextSelector,
} from "use-context-selector";

const AppContext = createContext();

function NameComponent() {
  const name = useContextSelector(AppContext, (state) => state.name);

  useEffect(() => {
    console.log("NameComponent rendered");
  });

  return (
    <>Name: {name}</>
  );
}

function CountComponent() {
  const count = useContextSelector(AppContext, (state) => state.count);

  useEffect(() => {
    console.log("CountComponent rendered");
  });

  return (
    <>Count: {count}</>
  );
}

function AppProvider({ children }) {
  const [name, setName] = useState("John");
  const [count, setCount] = useState(0);

  return (
    <AppContext.Provider value={{ name, count, setName, setCount }}>
      <button onClick={() => setName(name === "John" ? "Jane" : "John")}>
        Change Name
      </button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      {children}
    </AppContext.Provider>
  );
}

function App() {
  return (
    <AppProvider>
      <NameComponent />
      <CountComponent />
    </AppProvider>
  );
}

export default App;