useSyncExternalStore

src/app.tsx

@@ -1,16 +1,34 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
 import { Dashboard } from './dashboard'
+import { stars as starsContext } from './__data__/context'
+import { users } from './__data__/users'
 
 const App = () => {
+  const [stars, setStar] = useState(
+    Object.entries(users).reduce(
+      (acc, [id, user]) => ({ ...acc, [id]: user.rated }),
+      {},
+    ),
+  )
+
+  const updateStar = useCallback((userId: string, rate: number) =>
+    setStar((state) => ({ ...state, [userId]: rate })), [setStar])
   return (
-    <ChakraProvider>
-      <BrowserRouter>
-        <Dashboard />
-      </BrowserRouter>
-    </ChakraProvider>
+    <starsContext.Provider
+      value={{
+        stars,
+        setStar: updateStar,
+      }}
+    >
+      <ChakraProvider>
+        <BrowserRouter>
+          <Dashboard />
+        </BrowserRouter>
+      </ChakraProvider>
+    </starsContext.Provider>
   )
 }