From 5a2343ad25c5574e071bf45d6191fe985afd9d87 Mon Sep 17 00:00:00 2001 From: atzcl Date: Tue, 2 Mar 2021 16:35:23 +0800 Subject: [PATCH 1/2] feat(useUpdateEffect): support ssr --- src/hooks/useLayoutEffect.ts | 5 +++++ src/hooks/useUpdateEffect.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/hooks/useLayoutEffect.ts diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts new file mode 100644 index 00000000..0ffc718c --- /dev/null +++ b/src/hooks/useLayoutEffect.ts @@ -0,0 +1,5 @@ +import * as React from 'react'; + +const isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; + +export const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts index a66e7cdb..6ba60d74 100644 --- a/src/hooks/useUpdateEffect.ts +++ b/src/hooks/useUpdateEffect.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { useLayoutEffect } from './useLayoutEffect'; /** * Work as `componentDidUpdate` @@ -6,7 +7,7 @@ import * as React from 'react'; export default function useUpdateEffect(callback: () => void | (() => void), condition: any[]) { const initRef = React.useRef(false); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (!initRef.current) { initRef.current = true; return undefined; From fdd83b38f8414e28e1eb966d589f172fde6b208a Mon Sep 17 00:00:00 2001 From: atzcl Date: Wed, 10 Mar 2021 21:46:03 +0800 Subject: [PATCH 2/2] refactor(useLayoutEffect): use canUseDom --- src/hooks/useLayoutEffect.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts index 0ffc718c..d1731cd1 100644 --- a/src/hooks/useLayoutEffect.ts +++ b/src/hooks/useLayoutEffect.ts @@ -1,5 +1,4 @@ import * as React from 'react'; +import canUseDom from 'rc-util/lib/Dom/canUseDom'; -const isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; - -export const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect; +export const useLayoutEffect = canUseDom() ? React.useLayoutEffect : React.useEffect;