docs: zustand/context correct doc, added snippets (#433)

* docs: zustand/context correct doc, added snippets

* docs: corrected review points

* docs: createContext summary change

Author: karthikcodes6

readme.md

@@ -456,10 +456,10 @@ import createContext from 'zustand/context'
 
 const { Provider, useStore } = createContext()
 
-const store = create(...)
+const createStore = () => create(...)
 
 const App = () => (
-  <Provider initialStore={store}>
+  <Provider initialStore={createStore()}>
     ...
   </Provider>
 )
@@ -470,6 +470,59 @@ const Component = () => {
   ...
 }
 ```
+<details>
+  <summary>createContext usage in real components</summary>
+
+  ```jsx
+  import create from "zustand";
+  import createContext from "zustand/context";
+
+  // Best practice: You can move the below createContext() and createStore to a separate file(store.js) and import the Provider, useStore here/wherever you need.
+
+  const { Provider, useStore } = createContext();
+
+  const createStore = () =>
+    create((set) => ({
+      bears: 0,
+      increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+      removeAllBears: () => set({ bears: 0 })
+    }));
+
+  const Button = () => {
+    return (
+        {/** store() - This will create a store for each time using the Button component instead of using one store for all components **/}
+      <Provider initialStore={createStore()}> 
+        <ButtonChild />
+      </Provider>
+    );
+  };
+
+  const ButtonChild = () => {
+    const state = useStore();
+    return (
+      <div>
+        {state.bears}
+        <button
+          onClick={() => {
+            state.increasePopulation();
+          }}
+        >
+          +
+        </button>
+      </div>
+    );
+  };
+
+  export default function App() {
+    return (
+      <div className="App">
+        <Button />
+        <Button />
+      </div>
+    );
+  }
+  ```
+</details>
 
 ## TypeScript