fix(docs): zustand v3 context migration doc (pmndrs#2039)

* fix(docs): zustand v3 context migration doc * Update docs/previous-versions/zustand-v3-create-context.md Co-authored-by: Blazej Sewera <[email protected]> * Update docs/previous-versions/zustand-v3-create-context.md Co-authored-by: Blazej Sewera <[email protected]> * Update docs/previous-versions/zustand-v3-create-context.md Co-authored-by: Blazej Sewera <[email protected]> --------- Co-authored-by: Blazej Sewera <[email protected]>
sobies93 · Sep 11, 2023 · db76eba · db76eba
1 parent 504aa40
commit db76eba
Showing 1 changed file with 31 additions and 18 deletions.
diff --git a/docs/previous-versions/zustand-v3-create-context.md b/docs/previous-versions/zustand-v3-create-context.md
@@ -107,25 +107,38 @@ export default function App({ initialBears }) {
 
 Discussion: https://github.com/pmndrs/zustand/discussions/1276
 
-Here's the diff showing how to migrate from v3 createContext to v4 API.
+Here's the new context usage with v4 API.
 
-```diff
-// store.tsx
-+ import { createContext, useContext } from "react";
-- import create from "zustand";
-- import createContext from "zustand/context";
-+ import { createStore, useStore } from "zustand";
-
-- const useStore = create((set) => ({
-+ const store = createStore((set) => ({
-    bears: 0,
-    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
-    removeAllBears: () => set({ bears: 0 })
-  }));
+```jsx
+import { createContext, useContext, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
+
+const StoreContext = createContext(null)
+
+const StoreProvider = ({ children }) => {
+  const storeRef = useRef()
+  if (!storeRef.current) {
+    storeRef.current = createStore((set) => ({
+      // ...
+    }))
+  }
+  return (
+    <StoreContext.Provider value={storeRef.current}>
+      {children}
+    </StoreContext.Provider>
+  )
+}
 
-+ const MyContext = createContext()
+const useStoreInContext = (selector) => {
+  const store = useContext(StoreContext)
+  if (!store) {
+    throw new Error('Missing StoreProvider')
+  }
+  return useStore(store, selector)
+}
+```
 
-+ export const Provider = ({ children }) => <MyContext.Provider value={store}>{children}</MyContext.Provider>;
+Or reach out to some third-party libraries that provide Zustand v3-like APIs:
 
-+ export const useMyStore = (selector) => useStore(useContext(MyContext), selector);
-```
+- <https://github.com/charkour/zustand-di>
+- <https://github.com/arvinxx/zustand-utils>