fix: add useIsomorphicLayoutEffect back (#29)

Author: zombieJ

src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,7 @@
+import { useEffect, useLayoutEffect } from 'react';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
+// It's safe to use `useLayoutEffect` but the warning is annoying
+const useIsomorphicLayoutEffect = canUseDom() ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

src/hooks/useStatus.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import useState from 'rc-util/lib/hooks/useState';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import {
   STATUS_APPEAR,
   STATUS_NONE,
@@ -21,6 +20,7 @@ import type {
 import type { CSSMotionProps } from '../CSSMotion';
 import useStepQueue, { DoStep, SkipStep, isActive } from './useStepQueue';
 import useDomMotionEvents from './useDomMotionEvents';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 export default function useStatus(
   supportMotion: boolean,
@@ -163,7 +163,7 @@ export default function useStatus(
 
   // ============================ Status ============================
   // Update with new status
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setAsyncVisible(visible);
 
     const isMounted = mountedRef.current;

src/hooks/useStepQueue.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import useState from 'rc-util/lib/hooks/useState';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import type { StepStatus, MotionStatus } from '../interface';
 import {
   STEP_PREPARE,
@@ -10,6 +9,7 @@ import {
   STEP_NONE,
 } from '../interface';
 import useNextFrame from './useNextFrame';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
 
 const STEP_QUEUE: StepStatus[] = [
   STEP_PREPARE,
@@ -41,7 +41,7 @@ export default (
     setStep(STEP_PREPARE, true);
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
       const index = STEP_QUEUE.indexOf(step);
       const nextStep = STEP_QUEUE[index + 1];