diff --git a/src/ageAssurance/index.tsx b/src/ageAssurance/index.tsx index 3c8d5b9356..23d3a30586 100644 --- a/src/ageAssurance/index.tsx +++ b/src/ageAssurance/index.tsx @@ -1,4 +1,4 @@ -import {createContext, useContext, useEffect, useMemo} from 'react' +import {createContext, useCallback, useContext, useEffect, useMemo} from 'react' import {useGetAndRegisterPushToken} from '#/lib/notifications/notifications' import {Provider as RedirectOverlayProvider} from '#/ageAssurance/components/RedirectOverlay' @@ -56,16 +56,20 @@ function InnerProvider({children}: {children: React.ReactNode}) { const state = useAgeAssuranceState() const getAndRegisterPushToken = useGetAndRegisterPushToken() + const handleAccessUpdate = useCallback( + (s: AgeAssuranceState) => { + getAndRegisterPushToken({ + isAgeRestricted: s.access !== AgeAssuranceAccess.Full, + }) + }, + [getAndRegisterPushToken], + ) + useOnAgeAssuranceAccessUpdate(handleAccessUpdate) + useEffect(() => { logger.debug(`useAgeAssuranceState`, {state}) }, [state]) - useOnAgeAssuranceAccessUpdate(state => { - getAndRegisterPushToken({ - isAgeRestricted: state.access !== AgeAssuranceAccess.Full, - }) - }) - return ( void, ) { const state = useAgeAssuranceState() - const prevState = useRef(null) + // start with null to ensure callback is called on first render + const [prevAccess, setPrevAccess] = useState(null) - if (prevState.current !== state.access) { - prevState.current = state.access - cb(state) - logger.debug(`useOnAgeAssuranceAccessUpdate`, {state}) - } + useEffect(() => { + if (prevAccess !== state.access) { + setPrevAccess(state.access) + cb(state) + logger.debug(`useOnAgeAssuranceAccessUpdate`, {state}) + } + }, [cb, state, prevAccess]) }