Avoids duplicate deref calculations in useStoreDependency

See #95

Avoids duplicate deref calculations in `useStoreDependency`. Only
calculate once; use this result to initialize state (if necessary)
and as the next state.

When the value changes, two deref calculations will still run:

1. the initial render/hook call
2. the re-render/hook call triggered by setting the new value in state

Author: gmcnaughton

src/dependencies/__tests__/useStoreDependency-test.js

@@ -214,13 +214,16 @@ describe('useStoreDependency', () => {
   describe('with props', () => {
     let store;
     let multiplyDependency;
+    let derefCallCount;
 
     beforeEach(() => {
       store = BaseStoreFactory.register(dispatcher);
+      derefCallCount = 0;
       multiplyDependency = {
         stores: [store],
         deref: ({ factor }) => {
           if (!factor) throw new Error('no factor provided');
+          derefCallCount += 1;
           return store.get() * factor;
         },
       };
@@ -287,5 +290,38 @@ describe('useStoreDependency', () => {
       rendered.update();
       expect(rendered.find('div').prop('data-factor')).toBe(16);
     });
+
+    describe('deref call count', () => {
+      it('called once on initial render', () => {
+        const Component = ({ factor }) => {
+          const value = useStoreDependency(multiplyDependency, { factor });
+          return <div data-value={value} />;
+        };
+        mount(<Component factor={4} />);
+        expect(derefCallCount).toBe(1);
+      });
+
+      it('called once on re-render', () => {
+        const Component = ({ factor }) => {
+          const value = useStoreDependency(multiplyDependency, { factor });
+          return <div data-value={value} />;
+        };
+        const rendered = mount(<Component factor={4} />);
+        rendered.setProps({});
+        rendered.update();
+        expect(derefCallCount).toBe(2);
+      });
+
+      it('called twice on prop change (once from the initial re-render, again in the second re-render after the internal setState call)', () => {
+        const Component = ({ factor }) => {
+          const value = useStoreDependency(multiplyDependency, { factor });
+          return <div data-value={value} />;
+        };
+        const rendered = mount(<Component factor={4} />);
+        rendered.setProps({ factor: 8 });
+        rendered.update();
+        expect(derefCallCount).toBe(3);
+      });
+    });
   });
 });

src/dependencies/useStoreDependency.ts

@@ -83,9 +83,8 @@ function useStoreDependency<Props, DepType>(
 ): DepType {
   enforceDispatcher(dispatcher);
 
-  const [dependencyValue, setDependencyValue] = useState({
-    dependency: calculate(dependency, props),
-  });
+  const newValue = { dependency: calculate(dependency, props) };
+  const [dependencyValue, setDependencyValue] = useState(newValue);
 
   const currProps = useCurrent(props);
 
@@ -99,7 +98,6 @@ function useStoreDependency<Props, DepType>(
     setDependencyValue
   );
 
-  const newValue = { dependency: calculate(dependency, props) };
   if (!shallowEqual(newValue.dependency, dependencyValue.dependency)) {
     setDependencyValue(newValue);
     return newValue.dependency;