fix: 🐛 error in React 17 (#67)

1. replace useEffect with useLayoutEffect ✅ Closes: ant-design/ant-design#27006
react-component · Oct 9, 2020 · 37f3aa2 · 37f3aa2 · vercel · Oct 9, 2020
1 parent 1ee9665
commit 37f3aa2
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/examples/animate.tsx b/examples/animate.tsx
@@ -58,7 +58,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
   ref,
 ) => {
   const motionRef = React.useRef(false);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     return () => {
       if (motionRef.current) {
         onAppear();

diff --git a/src/List.tsx b/src/List.tsx
@@ -248,7 +248,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     return true;
   });
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     // Firefox only
     function onMozMousePixelScroll(e: Event) {
       if (inVirtual) {

diff --git a/src/hooks/useMobileTouchMove.ts b/src/hooks/useMobileTouchMove.ts
@@ -66,7 +66,7 @@ export default function useMobileTouchMove(
     }
   };
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (inVirtual) {
       listRef.current.addEventListener('touchstart', onTouchStart);
     }