From 57e593ebda2c2f758a9aec29b247ccbe25bab8a4 Mon Sep 17 00:00:00 2001 From: Chris Thielen Date: Thu, 2 Jan 2020 21:05:43 -0800 Subject: [PATCH] fix(useTransitionHook): update hook when options or criteria changes. Use a stable callback reference. --- src/components/hooks/useTransitionHook.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/hooks/useTransitionHook.ts b/src/components/hooks/useTransitionHook.ts index 44e023ca..ef8467e6 100644 --- a/src/components/hooks/useTransitionHook.ts +++ b/src/components/hooks/useTransitionHook.ts @@ -1,7 +1,9 @@ import { curry, HookFn, StateParams, TransitionService, TransitionStateHookFn } from '@uirouter/core'; import { HookMatchCriteria, HookRegOptions, TransitionHookFn } from '@uirouter/core/lib/transition/interface'; import { useEffect, useState } from 'react'; +import { useDeepObjectDiff } from './useDeepObjectDiff'; import { useRouter } from './useRouter'; +import { useStableCallback } from './useStableCallback'; type HookName = 'onBefore' | 'onStart' | 'onSuccess' | 'onError' | 'onSuccess' | 'onFinish'; type StateHookName = 'onEnter' | 'onRetain' | 'onExit'; @@ -25,8 +27,9 @@ export function useTransitionHook( options?: HookRegOptions ) { const { transitionService } = useRouter(); + const stableCallback = useStableCallback(callback); useEffect(() => { - const deregister = transitionService[hookRegistrationFn](criteria, callback as any, options); + const deregister = transitionService[hookRegistrationFn](criteria, stableCallback as any, options); return () => deregister(); - }, [transitionService, hookRegistrationFn]); + }, [transitionService, hookRegistrationFn, useDeepObjectDiff(criteria), useDeepObjectDiff(options)]); }