fix(react): should still not skip first setState if not first rendering

Author: forehalo

packages/react/src/__tests__/react.spec.tsx

@@ -146,7 +146,7 @@ describe('Hooks', () => {
     expect(testWrapper.root.findByType('div').children[0]).toBe('0')
   })
 
-  it.only('should not re-render if return state shallow equaled', () => {
+  it('should not re-render if return state shallow equaled', () => {
     const fooSpy = Sinon.spy()
     const FooComponent = () => {
       const state = useModuleState(CountModel, {
@@ -196,4 +196,41 @@ describe('Hooks', () => {
     expect(spy.callCount).toBe(2)
     fooSpy.resetHistory()
   })
+
+  it('should run selector with new closure', () => {
+    const setPlusCountStub = Sinon.stub()
+    const FooComponent = () => {
+      const [plusCount, setPlusCount] = useState(1)
+      const plusOneCount = useModuleState(CountModel, {
+        selector: (state) => plusCount + state.count,
+        dependencies: [plusCount],
+      })
+
+      useEffect(() => {
+        setPlusCountStub.callsFake(() => {
+          setPlusCount(2)
+        })
+      }, [])
+
+      return <div>{plusOneCount}</div>
+    }
+
+    let fooWrapper!: ReactTestRenderer
+    act(() => {
+      fooWrapper = create(<FooComponent />)
+    })
+
+    expect(fooWrapper.root.findByType('div').children[0]).toBe('1')
+    act(() => {
+      setPlusCountStub()
+    })
+    expect(fooWrapper.root.findByType('div').children[0]).toBe('2')
+
+    act(() => {
+      setCountStub()
+    })
+    expect(fooWrapper.root.findByType('div').children[0]).toBe('12')
+
+    setPlusCountStub.reset()
+  })
 })

packages/react/src/index.ts

@@ -1,6 +1,6 @@
 import { EffectModule, ActionOfEffectModule } from '@sigi/core'
 import { ConstructorOf, IStore } from '@sigi/types'
-import { useMemo, useEffect, useState } from 'react'
+import { useMemo, useEffect, useState, useRef } from 'react'
 import { distinctUntilChanged, map, skip } from 'rxjs/operators'
 
 import { useInstance } from './injectable-context'
@@ -46,6 +46,7 @@ function _useModuleState<S, U = S>(
   }
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   dependencies = dependencies || []
+  const isFirstRendering = useRef(true)
   const [appState, setState] = useState(() => {
     const initialState = store.state
     return selector ? selector(initialState) : initialState
@@ -57,9 +58,10 @@ function _useModuleState<S, U = S>(
         map((s) => (selector ? selector(s) : s)),
         distinctUntilChanged((s1, s2) => equalFn(s1, s2)),
         // skip initial state emission
-        skip(1),
+        skip(isFirstRendering.current ? 1 : 0),
       )
       .subscribe(setState)
+    isFirstRendering.current = false
     return () => {
       subscription.unsubscribe()
     }