diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts index 57611522..625f27fb 100644 --- a/src/hooks/useLayoutEffect.ts +++ b/src/hooks/useLayoutEffect.ts @@ -10,3 +10,24 @@ const useLayoutEffect = : React.useEffect; export default useLayoutEffect; + +export const useLayoutUpdateEffect: typeof React.useEffect = ( + callback, + deps, +) => { + const firstMountRef = React.useRef(true); + + useLayoutEffect(() => { + if (!firstMountRef.current) { + return callback(); + } + }, deps); + + // We tell react that first mount has passed + useLayoutEffect(() => { + firstMountRef.current = false; + return () => { + firstMountRef.current = true; + }; + }, []); +}; diff --git a/src/hooks/useMergedState.ts b/src/hooks/useMergedState.ts index 5d148c54..3cbe1d0e 100644 --- a/src/hooks/useMergedState.ts +++ b/src/hooks/useMergedState.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import useEvent from './useEvent'; -import useLayoutEffect from './useLayoutEffect'; +import useLayoutEffect, { useLayoutUpdateEffect } from './useLayoutEffect'; import useState from './useState'; type Updater = ( @@ -15,24 +15,6 @@ enum Source { type ValueRecord = [T, Source, T]; -const useUpdateEffect: typeof React.useEffect = (callback, deps) => { - const firstMountRef = React.useRef(true); - - useLayoutEffect(() => { - if (!firstMountRef.current) { - return callback(); - } - }, deps); - - // We tell react that first mount has passed - useLayoutEffect(() => { - firstMountRef.current = false; - return () => { - firstMountRef.current = true; - }; - }, []); -}; - /** We only think `undefined` is empty */ function hasValue(value: any) { return value !== undefined; @@ -82,7 +64,7 @@ export default function useMergedState( const postMergedValue = postState ? postState(chosenValue) : chosenValue; // ======================= Sync ======================= - useUpdateEffect(() => { + useLayoutUpdateEffect(() => { setMergedValue(([prevValue]) => [value, Source.PROP, prevValue]); }, [value]);