ReactJS Design Pattern ~Context Selector~

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;