zustand

host/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "zustand": "^3.7.0"
   }
-}
+}

host/src/App.jsx

@@ -3,25 +3,20 @@ import ReactDOM from 'react-dom';
 import Header from 'nav/Header';
 
 import './index.css';
-import { CountProvider, useCount } from 'host/store';
+import useStore from 'host/store';
 
 const App = () => {
-  const [count, setCount] = useCount(0);
+  const { count, increment } = useStore();
 
   return (
     <div className='container'>
-      <Header count={count} onClear={() => setCount(0)} />
+      <Header />
       <div>Name: Host</div>
       <div>Count : {count}</div>
       <div>
-        <button onClick={() => setCount(count + 1)}>Add to Cart</button>
+        <button onClick={increment}>Add to Cart</button>
       </div>
     </div>
   );
 };
-ReactDOM.render(
-  <CountProvider>
-    <App />
-  </CountProvider>,
-  document.getElementById('app')
-);
+ReactDOM.render(<App />, document.getElementById('app'));

host/src/store.jsx

@@ -1,15 +1,9 @@
-import React, { createContext, useContext, useState } from 'react';
+import create from 'zustand';
 
-const CountContext = createContext([0, () => {}]);
+const useStore = create((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  clear: () => set(() => ({ count: 0 })),
+}));
 
-export function CountProvider({ children }) {
-  return (
-    <CountContext.Provider value={useState(0)}>
-      {children}
-    </CountContext.Provider>
-  );
-}
-
-export function useCount() {
-  return useContext(CountContext);
-}
+export default useStore;

host/yarn.lock

@@ -4030,3 +4030,8 @@ yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+zustand@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.0.tgz#a5c68fb06bdee9c63ad829de2432635be6d0ce69"
+  integrity sha512-USzVzLGrvZ8VK1/sEsOAmeqa8N7D3OBdZskVaL7DL89Q4QLTYD053iIlZ5KDidyZ+Od80Dttin/f8ZulOLFFDQ==

nav/src/App.jsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { CountProvider } from 'host/store';
-
 import Header from './Header';
 
 import './index.css';
 
 const App = () => (
-  <CountProvider>
-    <div className='container'>
-      <Header />
-      Name: Nav
-    </div>
-  </CountProvider>
+  <div className='container'>
+    <Header />
+    Name: Nav
+  </div>
 );
 ReactDOM.render(<App />, document.getElementById('app'));

nav/src/Header.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { useCount } from 'host/store';
+import useStore from 'host/store';
 
 function Header() {
-  const [count, setCount] = useCount();
+  const { count, clear } = useStore();
 
   return (
     <div style={{ border: '1px solid black' }}>
       Header
       <div>{count}</div>
-      <button onClick={() => setCount(0)}>Clear</button>
+      <button onClick={clear}>Clear</button>
     </div>
   );
 }