useContext

host/src/App.jsx

@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom';
 import Header from 'nav/Header';
 
 import './index.css';
+import { CountProvider, useCount } from './store';
 
 const App = () => {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useCount(0);
 
   return (
     <div className='container'>
@@ -18,4 +19,9 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(
+  <CountProvider>
+    <App />
+  </CountProvider>,
+  document.getElementById('app')
+);

host/src/store.jsx

@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const CountContext = createContext([0, () => {}]);
+
+export function CountProvider({ children }) {
+  return (
+    <CountContext.Provider value={useState(0)}>
+      {children}
+    </CountContext.Provider>
+  );
+}
+
+export function useCount() {
+  return useContext(CountContext);
+}