fix(hooks): first time rendering behavior issue

fix #29

Author: runjuu

src/hooks/use-ayanami-instance.ts

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { get } from 'lodash'
 
 import { ActionMethodOfAyanami, Ayanami, combineWithIkari } from '../core'
+import { useSubscribeAyanamiState } from './use-subscribe-ayanami-state'
 
 export interface UseAyanamiInstanceConfig {
   destroyWhenUnmount?: boolean
@@ -20,19 +21,8 @@ export function useAyanamiInstance<M extends Ayanami<S>, S>(
   ayanami: M,
   config?: Config,
 ): Result<M, S> {
-  const ayanamiRef = React.useRef(ayanami)
   const ikari = React.useMemo(() => combineWithIkari(ayanami), [ayanami])
-  const [state, setState] = React.useState<S>(() => ayanami.getState())
-
-  if (ayanamiRef.current !== ayanami) {
-    ayanamiRef.current = ayanami
-    setState(ayanami.getState())
-  }
-
-  React.useEffect(() => {
-    const subscription = ayanami.getState$().subscribe(setState)
-    return () => subscription.unsubscribe()
-  }, [ayanami])
+  const state = useSubscribeAyanamiState(ayanami)
 
   React.useEffect(
     () => () => {

src/hooks/use-subscribe-ayanami-state.ts

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Subscription } from 'rxjs'
+
+import { Ayanami } from '../core'
+
+export function useSubscribeAyanamiState<M extends Ayanami<S>, S>(ayanami: M): S {
+  const ayanamiRef = React.useRef<Ayanami<S> | null>(null)
+  const subscriptionRef = React.useRef<Subscription | null>(null)
+
+  const [state, setState] = React.useState<S>(() => ayanami.getState())
+
+  if (ayanamiRef.current !== ayanami) {
+    ayanamiRef.current = ayanami
+
+    if (subscriptionRef.current) {
+      subscriptionRef.current.unsubscribe()
+      subscriptionRef.current = null
+    }
+
+    if (ayanami) {
+      subscriptionRef.current = ayanami.getState$().subscribe(setState)
+    }
+  }
+
+  React.useEffect(
+    () => () => {
+      if (subscriptionRef.current) {
+        subscriptionRef.current.unsubscribe()
+      }
+    },
+    [subscriptionRef],
+  )
+
+  return state
+}

test/specs/hooks.spec.tsx

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs'
 import { map, withLatestFrom } from 'rxjs/operators'
 
 import { Ayanami, Effect, EffectAction, Reducer, useAyanami, TransientScope } from '../../src'
+import { useCallback, useEffect } from 'react'
 
 interface State {
   count: number
@@ -84,6 +85,38 @@ describe('Hooks spec:', () => {
       click(CountAction.MINUS)
       expect(count()).toBe('0')
     })
+
+    it('should only render once when update the state right during rendering', () => {
+      const spy = jest.fn()
+      const TestComponent = () => {
+        const [state, actions] = useAyanami(Count, { scope: TransientScope })
+        const addOne = useCallback(() => actions.add(1), [])
+
+        if (state.count % 2 === 0) {
+          actions.add(1)
+        }
+
+        useEffect(() => {
+          spy(state.count)
+        }, [state.count])
+
+        return (
+          <div>
+            <p>count: {state.count}</p>
+            <button onClick={addOne}>add one</button>
+          </div>
+        )
+      }
+
+      const renderer = create(<TestComponent />)
+
+      // https://github.com/facebook/react/issues/14050 to trigger useEffect manually
+      renderer.update(<TestComponent />)
+      expect(spy.mock.calls).toEqual([[1]])
+
+      act(() => renderer.root.findByType('button').props.onClick())
+      expect(spy.mock.calls).toEqual([[1], [3]])
+    })
   })
 
   describe('Scope behavior', () => {