diff --git a/packages/core/src/NavigationContainer.tsx b/packages/core/src/NavigationContainer.tsx index 5c1bc8c4..5e8124f4 100644 --- a/packages/core/src/NavigationContainer.tsx +++ b/packages/core/src/NavigationContainer.tsx @@ -137,9 +137,9 @@ const Container = React.forwardRef(function NavigationContainer( [trackAction] ); - const getRootState = () => { + const getRootState = React.useCallback(() => { return getStateForRoute('root'); - }; + }, [getStateForRoute]); React.useImperativeHandle(ref, () => ({ ...(Object.keys(CommonActions) as Array).reduce< @@ -220,18 +220,18 @@ const Container = React.forwardRef(function NavigationContainer( if (skipTrackingRef.current) { skipTrackingRef.current = false; } else { - trackState(state); + trackState(getRootState); } navigationStateRef.current = state; transactionStateRef.current = null; if (!isFirstMountRef.current && onStateChange) { - onStateChange(state); + onStateChange(getRootState()); } isFirstMountRef.current = false; - }, [state, onStateChange, trackState]); + }, [state, onStateChange, trackState, getRootState]); return ( diff --git a/packages/core/src/__tests__/NavigationContainer.test.tsx b/packages/core/src/__tests__/NavigationContainer.test.tsx index 0fb89cc0..42ec38f5 100644 --- a/packages/core/src/__tests__/NavigationContainer.test.tsx +++ b/packages/core/src/__tests__/NavigationContainer.test.tsx @@ -321,7 +321,28 @@ it('handle resetting state with ref', () => { }); expect(onStateChange).toBeCalledTimes(1); - expect(onStateChange).lastCalledWith(state); + expect(onStateChange).lastCalledWith({ + index: 1, + key: '5', + routeNames: ['foo', 'foo2', 'bar', 'baz'], + routes: [ + { + key: 'baz', + name: 'baz', + state: { + index: 0, + key: '6', + routeNames: ['qux', 'lex'], + routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }], + stale: false, + type: 'test', + }, + }, + { key: 'bar', name: 'bar' }, + ], + stale: false, + type: 'test', + }); }); it('handle getRootState', () => { diff --git a/packages/core/src/__tests__/index.test.tsx b/packages/core/src/__tests__/index.test.tsx index 7a79af8c..ab9a4710 100644 --- a/packages/core/src/__tests__/index.test.tsx +++ b/packages/core/src/__tests__/index.test.tsx @@ -534,7 +534,19 @@ it('updates route params with setParams applied to parent', () => { key: '0', routeNames: ['foo', 'bar'], routes: [ - { key: 'foo', name: 'foo', params: { username: 'alice' } }, + { + key: 'foo', + name: 'foo', + params: { username: 'alice' }, + state: { + index: 0, + key: '1', + routeNames: ['baz'], + routes: [{ key: 'baz', name: 'baz' }], + stale: false, + type: 'test', + }, + }, { key: 'bar', name: 'bar' }, ], stale: false, @@ -549,7 +561,19 @@ it('updates route params with setParams applied to parent', () => { key: '0', routeNames: ['foo', 'bar'], routes: [ - { key: 'foo', name: 'foo', params: { username: 'alice', age: 25 } }, + { + key: 'foo', + name: 'foo', + params: { username: 'alice', age: 25 }, + state: { + index: 0, + key: '1', + routeNames: ['baz'], + routes: [{ key: 'baz', name: 'baz' }], + stale: false, + type: 'test', + }, + }, { key: 'bar', name: 'bar' }, ], stale: false, diff --git a/packages/core/src/useDevTools.tsx b/packages/core/src/useDevTools.tsx index b008ac20..214db0d7 100644 --- a/packages/core/src/useDevTools.tsx +++ b/packages/core/src/useDevTools.tsx @@ -62,7 +62,7 @@ export default function useDevTools({ name, reset, state }: Options) { ); const trackState = React.useCallback( - (state: State) => { + (getState: () => State) => { if (!devTools) { return; } @@ -71,9 +71,11 @@ export default function useDevTools({ name, reset, state }: Options) { devTools.send(actions.current.shift(), lastStateRef.current); } + const state = getState(); + if (actions.current.length) { devTools.send(actions.current.pop(), state); - } else if (lastStateRef.current !== state) { + } else { devTools.send('@@UNKNOWN', state); } diff --git a/packages/core/src/useOnGetState.tsx b/packages/core/src/useOnGetState.tsx index 07b0f898..e3a048cb 100644 --- a/packages/core/src/useOnGetState.tsx +++ b/packages/core/src/useOnGetState.tsx @@ -14,7 +14,7 @@ export default function useOnGetState({ const route = React.useContext(NavigationRouteContext); const key = route ? route.key : 'root'; - const getter = React.useCallback(() => { + const getRehydratedState = React.useCallback(() => { const state = getState(); return { ...state, @@ -26,6 +26,6 @@ export default function useOnGetState({ }, [getState, getStateForRoute]); React.useEffect(() => { - return addStateGetter && addStateGetter(key, getter); - }, [addStateGetter, getter, key]); + return addStateGetter && addStateGetter(key, getRehydratedState); + }, [addStateGetter, getRehydratedState, key]); } diff --git a/packages/core/src/useStateGetters.tsx b/packages/core/src/useStateGetters.tsx index 4e802ec2..591c290c 100644 --- a/packages/core/src/useStateGetters.tsx +++ b/packages/core/src/useStateGetters.tsx @@ -9,7 +9,7 @@ export default function useStateGetters() { const stateGetters = React.useRef>({}); const getStateForRoute = React.useCallback( - routeKey => + (routeKey: string) => stateGetters.current[routeKey] === undefined ? undefined : stateGetters.current[routeKey](),