feat(stores): allow function store param, use returned value

Author: rolandszoke

README.md

@@ -503,6 +503,26 @@ export default view(() => {
 
 </details>
 
+<p></p>
+<details>
+<summary>You can also pass a <code>function</code> to the store. In this case easy-state will create a state store from the function result.</summary>
+<p></p>
+
+```jsx
+import { store, view } from 'react-easy-state';
+
+const localStore = () => ({ name: 'Bob' });
+
+export default view(() => {
+  const person = store(localStore);
+  return <div>{person.name}</div>;
+});
+```
+
+This is useful for large local stores to avoid large object creation on every render.
+
+</details>
+
 #### Local stores in class components
 
 ```jsx

__tests__/store.no-hook.test.jsx

@@ -73,4 +73,29 @@ describe('Using an old react version', () => {
       'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
     );
   });
+
+  test('Using function parameter for store should use the returned object', () => {
+    const person = store(() => ({ name: 'Bob' }));
+    const MyComp = view(
+      class extends Component {
+        render() {
+          return <div>{person.name}</div>;
+        }
+      },
+    );
+    const { container } = render(<MyComp />);
+    expect(container).toHaveTextContent('Bob');
+  });
+
+  if (!process.env.NOHOOK) {
+    test('Using function parameter for store inside function component should use the returned object', () => {
+      const localStore = () => ({ name: 'Bob' });
+      const MyComp = view(() => {
+        const person = store(localStore);
+        return <div>{person.name}</div>;
+      });
+      const { container } = render(<MyComp />);
+      expect(container).toHaveTextContent('Bob');
+    });
+  }
 });

package-lock.json

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo } from 'react';
 import { observable } from '@nx-js/observer-util';
 
 import {
@@ -12,13 +12,13 @@ export function store(obj) {
   // if it is a local store in a function component
   // create a memoized store at the first call instead
   if (isInsideFunctionComponent) {
-    // we have to use useRef instead of useMemo for local store persistence
-    // useMemo does not have the same guarantees about persistence as refs
+    // useMemo is not a semantic guarantee
+    // In the future, React may choose to “forget” some previously memoized values and recalculate them on next render
     // see this docs for more explanation: https://reactjs.org/docs/hooks-reference.html#usememo
-    const ref = useRef(obj);
-    // observable wrapping is idempotent
-    // wrapping the same object multiple times is the same as wrapping it once
-    return observable(ref.current);
+    return useMemo(
+      () => observable(typeof obj === 'function' ? obj() : obj),
+      [],
+    );
   }
   if (isInsideFunctionComponentWithoutHooks) {
     throw new Error(
@@ -30,5 +30,5 @@ export function store(obj) {
       'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
     );
   }
-  return observable(obj);
+  return observable(typeof obj === 'function' ? obj() : obj);
 }