ReactJS Design Pattern ~Context Selector~

・Context pattern keeps track of a specific piece of state using useContextSelector, unlike useContext. This prevents unnecessary re-rendering without tracking other pieces of state.

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 <p>Name: {name}</p>;
}

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

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

  return <p>Count: {count}</p>;
}

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

  return (
    <AppContext.Provider value={{ name, count }}>
      <div>
        <h1>Context Selector</h1>

        <button onClick={() => setName(name === "John" ? "Jane" : "John")}>
          Change Name
        </button>
        <button onClick={() => setCount(count + 1)}>Increment Count</button>

        {children}
      </div>
    </AppContext.Provider>
  );
}

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

export default App;