From d9fbaad32f7e902e9909e14b5d7aafee77410ee4 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 12 Sep 2024 21:26:58 +0800
Subject: [PATCH 1/3] fix: lint

---
 .../animatingnumbers/countup.taro.tsx         |  15 +-
 src/packages/animatingnumbers/countup.tsx     |   7 +-
 src/packages/audio/audio.taro.tsx             |   6 +-
 .../avatarcropper/avatarcropper.taro.tsx      |   9 +-
 src/packages/avatarcropper/avatarcropper.tsx  |   2 +-
 src/packages/button/button.taro.tsx           |   2 +-
 src/packages/button/button.tsx                |   2 +-
 .../collapseitem/collapseitem.taro.tsx        |  15 +-
 src/packages/collapseitem/collapseitem.tsx    |  12 +-
 src/packages/countdown/countdown.tsx          |   2 +-
 src/packages/image/image.tsx                  |   2 +-
 src/packages/inputnumber/inputnumber.taro.tsx |   4 +-
 src/packages/inputnumber/inputnumber.tsx      |   4 +-
 src/packages/menuitem/menuitem.taro.tsx       |   2 +-
 src/packages/navbar/navbar.taro.tsx           |   2 +-
 src/packages/navbar/navbar.tsx                |   2 +-
 src/packages/noticebar/noticebar.taro.tsx     |   1 -
 src/packages/notify/notify.taro.tsx           |  42 +++---
 src/packages/pagination/pagination.taro.tsx   |   2 +-
 src/packages/pagination/pagination.tsx        |   2 +-
 src/packages/picker/picker.taro.tsx           |   5 +-
 src/packages/picker/picker.tsx                |   5 +-
 src/packages/picker/pickerpanel.taro.tsx      | 132 ++++++++++--------
 src/packages/popup/popup.tsx                  |   3 +-
 src/packages/progress/progress.taro.tsx       |   2 +-
 src/packages/progress/progress.tsx            |   2 +-
 src/packages/radiogroup/radiogroup.taro.tsx   |   2 +-
 src/packages/radiogroup/radiogroup.tsx        |   2 +-
 src/packages/range/range.taro.tsx             |   2 +-
 src/packages/range/range.tsx                  |   2 +-
 .../shortpassword/shortpassword.taro.tsx      |   2 +-
 src/packages/shortpassword/shortpassword.tsx  |   4 +-
 src/packages/sticky/sticky.tsx                |   2 +-
 src/packages/swiper/demos/taro/demo2.tsx      |  19 +--
 src/packages/swiper/effects/focus.tsx         |   2 +-
 src/packages/table/useTableSticky.ts          |   2 +-
 src/packages/toast/toast.taro.tsx             |  23 +--
 src/packages/tour/tour.taro.tsx               |  39 +++---
 src/packages/tour/tour.tsx                    |  25 ++--
 src/packages/video/video.tsx                  |  14 +-
 src/packages/virtuallist/demos/h5/demo1.tsx   |   8 +-
 src/packages/virtuallist/demos/h5/demo2.tsx   |   8 +-
 src/packages/virtuallist/demos/h5/demo3.tsx   |   8 +-
 src/packages/virtuallist/demos/h5/demo4.tsx   |   8 +-
 src/packages/virtuallist/demos/taro/demo1.tsx |   8 +-
 src/packages/virtuallist/demos/taro/demo2.tsx |   8 +-
 src/packages/virtuallist/virtuallist.taro.tsx |  45 +++---
 src/packages/virtuallist/virtuallist.tsx      |   5 +-
 src/packages/watermark/watermark.taro.tsx     |  37 ++++-
 src/packages/watermark/watermark.tsx          |  37 ++++-
 50 files changed, 332 insertions(+), 264 deletions(-)

diff --git a/src/packages/animatingnumbers/countup.taro.tsx b/src/packages/animatingnumbers/countup.taro.tsx
index c0eaaacb00..080b507cdf 100644
--- a/src/packages/animatingnumbers/countup.taro.tsx
+++ b/src/packages/animatingnumbers/countup.taro.tsx
@@ -2,6 +2,7 @@ import React, {
   CSSProperties,
   FunctionComponent,
   useEffect,
+  useCallback,
   useRef,
   useState,
 } from 'react'
@@ -40,7 +41,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
   const timerRef = useRef(0)
   const numbers = Array.from({ length: 10 }, (v, i) => i)
 
-  const getShowNumber = () => {
+  const getShowNumber = useCallback(() => {
     const splitArr = value.split('.')
     const intNumber =
       length && splitArr[0].length < length
@@ -50,16 +51,16 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
       thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber
     }${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`
     return currNumber.split('')
-  }
+  }, [length, thousands, value])
 
   const [numerArr, setNumerArr] = useState<string[]>([])
 
   const [transformArr, setTransformArr] = useState<Array<string>>([])
   const isLoaded = useRef(false)
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current && numerArr.length) {
-      const query = createSelectorQuery()
+      createSelectorQuery()
         .selectAll('.nut-countup-listitem')
         .node((numberItems: any) => {
           const transformArrCache: string[] = []
@@ -79,7 +80,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         })
         .exec()
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle = (idx: number) => {
     return {
@@ -90,7 +91,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   useEffect(() => {
     setNumberTransform()
-  }, [numerArr])
+  }, [numerArr, setNumberTransform])
 
   useEffect(() => {
     if (!isLoaded.current) {
@@ -104,7 +105,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [value])
+  }, [value, delay, getShowNumber])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
diff --git a/src/packages/animatingnumbers/countup.tsx b/src/packages/animatingnumbers/countup.tsx
index a17c9b1fa2..c632623d7d 100644
--- a/src/packages/animatingnumbers/countup.tsx
+++ b/src/packages/animatingnumbers/countup.tsx
@@ -1,6 +1,7 @@
 import React, {
   CSSProperties,
   FunctionComponent,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -53,7 +54,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   const numerArr = useMemo(getShowNumber, [value, length, thousands])
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current) {
       const numberItems = countupRef.current.querySelectorAll(
         '.nut-countup-number'
@@ -72,7 +73,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         }
       })
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle: CSSProperties = {
     transition: `transform ${duration}s ease-in-out`,
@@ -85,7 +86,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [numerArr])
+  }, [numerArr, delay, setNumberTransform])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
diff --git a/src/packages/audio/audio.taro.tsx b/src/packages/audio/audio.taro.tsx
index f30f1b49d7..f6caaa0c00 100644
--- a/src/packages/audio/audio.taro.tsx
+++ b/src/packages/audio/audio.taro.tsx
@@ -97,14 +97,13 @@ export const Audio: FunctionComponent<
       onPlayEnd?.(audioCtx)
     }
   })
-
   audioCtx.onPlay(() => {
     const { duration } = audioCtx
     setTotalSeconds(Math.floor(duration))
     onPlay?.(audioCtx)
   })
   audioCtx.onCanplay(() => {
-    const intervalID = setInterval(function () {
+    const intervalID = setInterval(() => {
       if (audioCtx.duration !== 0) {
         setTotalSeconds(audioCtx.duration)
         clearInterval(intervalID)
@@ -122,8 +121,7 @@ export const Audio: FunctionComponent<
   })
 
   audioCtx.onError((res) => {
-    console.warn('code', res.errCode)
-    console.warn('message', res.errMsg)
+    console.warn('onError', res.errCode, res.errMsg)
   })
 
   function formatSeconds(value: string) {
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index 8840b88063..2e10302051 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -260,7 +260,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       // 绘制图片
       ctx.drawImage(src as HTMLImageElement, x, y, width, height)
     },
-    [drawImage, state]
+    [drawImage, state, pixelRatio, space]
   )
 
   // web绘制
@@ -277,7 +277,12 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     canvas.height = state.displayHeight
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas2dDraw(ctx)
-  }, [canvas2dDraw])
+  }, [
+    canvas2dDraw,
+    canvasAll.canvasId,
+    state.displayWidth,
+    state.displayHeight,
+  ])
 
   const alipayDraw = useCallback(() => {
     const ctx = canvasAll.cropperCanvas.getContext(
diff --git a/src/packages/avatarcropper/avatarcropper.tsx b/src/packages/avatarcropper/avatarcropper.tsx
index dd9a902283..9e7b6197a3 100644
--- a/src/packages/avatarcropper/avatarcropper.tsx
+++ b/src/packages/avatarcropper/avatarcropper.tsx
@@ -115,7 +115,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
-  }, [devicePixelRatio, drawImage.swidth])
+  }, [devicePixelRatio, drawImage.swidth, shape])
 
   // 是否是横向
   const isAngle = useMemo(() => {
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 13243ddc1e..eb1482a444 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -93,7 +93,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {
diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
index d2b85f78b5..97859d12aa 100644
--- a/src/packages/button/button.tsx
+++ b/src/packages/button/button.tsx
@@ -86,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {
diff --git a/src/packages/collapseitem/collapseitem.taro.tsx b/src/packages/collapseitem/collapseitem.taro.tsx
index fd9af4ec9c..77c4ed5f4a 100644
--- a/src/packages/collapseitem/collapseitem.taro.tsx
+++ b/src/packages/collapseitem/collapseitem.taro.tsx
@@ -6,6 +6,7 @@ import React, {
   useContext,
   useRef,
   useMemo,
+  useCallback,
 } from 'react'
 import classNames from 'classnames'
 import { createSelectorQuery } from '@tarojs/taro'
@@ -62,13 +63,13 @@ export const CollapseItem: FunctionComponent<
       return context.isOpen(name)
     }
     return false
-  }, [name, context.isOpen])
+  }, [name, context])
 
   const iconStyle = useMemo(() => {
     return expanded
       ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` }
       : { transform: 'translateY(-50%)' }
-  }, [expanded, rotate])
+  }, [expanded, rotate, context.rotate])
 
   const handleClick = () => {
     if (!disabled) {
@@ -102,7 +103,7 @@ export const CollapseItem: FunctionComponent<
         }
       })
     }, 200)
-  }, [children])
+  }, [children, target])
 
   useEffect(() => {
     setTimeout(() => {
@@ -112,9 +113,9 @@ export const CollapseItem: FunctionComponent<
         }
       })
     }, 100)
-  }, [])
+  }, [target])
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     // 连续切换状态时，清除打开的后续操作
     if (timer) {
       clearTimeout(timer)
@@ -134,7 +135,7 @@ export const CollapseItem: FunctionComponent<
         setTimer(timer)
       }
     }, 100)
-  }
+  }, [currentHeight, expanded, timer])
 
   const init = useRef(true)
 
@@ -144,7 +145,7 @@ export const CollapseItem: FunctionComponent<
     } else {
       toggle()
     }
-  }, [expanded])
+  }, [expanded, toggle])
 
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>
diff --git a/src/packages/collapseitem/collapseitem.tsx b/src/packages/collapseitem/collapseitem.tsx
index 386af9a854..d84098d672 100644
--- a/src/packages/collapseitem/collapseitem.tsx
+++ b/src/packages/collapseitem/collapseitem.tsx
@@ -5,6 +5,7 @@ import React, {
   useContext,
   useRef,
   useMemo,
+  useCallback,
 } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -58,13 +59,13 @@ export const CollapseItem: FunctionComponent<
       return context.isOpen(name)
     }
     return false
-  }, [name, context.isOpen])
+  }, [name, context])
 
   const iconStyle = useMemo(() => {
     return expanded
       ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` }
       : { transform: 'translateY(-50%)' }
-  }, [expanded, rotate])
+  }, [expanded, rotate, context.rotate])
 
   const handleClick = () => {
     if (!disabled) {
@@ -85,7 +86,7 @@ export const CollapseItem: FunctionComponent<
     return height ? `${height}px` : ''
   }
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     const start = expanded ? '0px' : getOffsetHeight()
     if (wrapperRef.current) {
       wrapperRef.current.style.height = start
@@ -98,7 +99,8 @@ export const CollapseItem: FunctionComponent<
         }
       })
     })
-  }
+  }, [expanded])
+
   const init = useRef(true)
 
   useEffect(() => {
@@ -110,7 +112,7 @@ export const CollapseItem: FunctionComponent<
     } else {
       toggle()
     }
-  }, [expanded])
+  }, [expanded, toggle])
 
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>
diff --git a/src/packages/countdown/countdown.tsx b/src/packages/countdown/countdown.tsx
index c9a4184fa0..36a81ed640 100644
--- a/src/packages/countdown/countdown.tsx
+++ b/src/packages/countdown/countdown.tsx
@@ -273,7 +273,7 @@ const InternalCountDown: ForwardRefRenderFunction<
       stateRef.current.isIninted = true
     }
     return componentWillUnmount
-  }, [])
+  }, [autoStart, time])
 
   const componentWillUnmount = () => {
     destroy && cancelAnimationFrame(stateRef.current.timer)
diff --git a/src/packages/image/image.tsx b/src/packages/image/image.tsx
index d606aa4a93..edb8f5ddf3 100644
--- a/src/packages/image/image.tsx
+++ b/src/packages/image/image.tsx
@@ -192,7 +192,7 @@ export const Image: FunctionComponent<
       return <div className="nut-img-error">{error}</div>
     }
     return null
-  }, [error, isError])
+  }, [error, isError, innerLoading])
 
   const renderLoading = useCallback(() => {
     if (!loading) return null
diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index 6ea4848876..7e1abbcb2c 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -130,14 +130,14 @@ export const InputNumber: FunctionComponent<
       setShadowValue(bound(Number(shadowValue), Number(min), Number(max)))
       setInputValue(format(shadowValue))
     }
-  }, [focused, shadowValue])
+  }, [focused, shadowValue, async, min, max])
 
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
       setInputValue(format(value))
     }
-  }, [value])
+  }, [value, async, min, max])
 
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1
diff --git a/src/packages/inputnumber/inputnumber.tsx b/src/packages/inputnumber/inputnumber.tsx
index 60b3c67d45..d5a89f9e32 100644
--- a/src/packages/inputnumber/inputnumber.tsx
+++ b/src/packages/inputnumber/inputnumber.tsx
@@ -126,14 +126,14 @@ export const InputNumber: FunctionComponent<
       setShadowValue(bound(Number(shadowValue), Number(min), Number(max)))
       setInputValue(format(shadowValue))
     }
-  }, [focused, shadowValue])
+  }, [focused, shadowValue, async, min, max, value])
 
   useEffect(() => {
     if (async) {
       setShadowValue(bound(Number(value), Number(min), Number(max)))
       setInputValue(format(value))
     }
-  }, [value])
+  }, [value, async, min, max])
 
   const calcNextValue = (current: any, step: any, symbol: number) => {
     const dig = digits + 1
diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx
index 041db8c4a2..5b56be6bed 100644
--- a/src/packages/menuitem/menuitem.taro.tsx
+++ b/src/packages/menuitem/menuitem.taro.tsx
@@ -106,7 +106,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
         })
       }
     })
-  }, [direction, windowHeight])
+  }, [direction, windowHeight, parent.lockScroll, parent.menuRef])
   usePageScroll(updateItemOffset)
 
   useImperativeHandle<any, any>(ref, () => ({
diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx
index 2c3739de8d..b3d68ecc21 100644
--- a/src/packages/navbar/navbar.taro.tsx
+++ b/src/packages/navbar/navbar.taro.tsx
@@ -99,7 +99,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
       setContentWidth(centerWidth.toFixed(2))
     }
     init()
-  }, [left, right, back])
+  }, [left, right, back, titleAlign])
 
   const renderLeft = () => {
     return back || left ? (
diff --git a/src/packages/navbar/navbar.tsx b/src/packages/navbar/navbar.tsx
index 8ddf755514..0add4fefb5 100644
--- a/src/packages/navbar/navbar.tsx
+++ b/src/packages/navbar/navbar.tsx
@@ -96,7 +96,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
     }
 
     setContentWidth(centerWidth.toFixed(2))
-  }, [left, right, back])
+  }, [left, right, back, titleAlign])
 
   const renderLeft = () => {
     return back || left ? (
diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx
index f41c3fcb9a..265c85728e 100644
--- a/src/packages/noticebar/noticebar.taro.tsx
+++ b/src/packages/noticebar/noticebar.taro.tsx
@@ -151,7 +151,6 @@ export const NoticeBar: FunctionComponent<
       initScrollWrap(content)
     }
     return () => {
-      // 销毁事件
       clearInterval(timer)
     }
   }, [])
diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx
index 4adb1c55b6..22535c0226 100644
--- a/src/packages/notify/notify.taro.tsx
+++ b/src/packages/notify/notify.taro.tsx
@@ -60,11 +60,7 @@ export const Notify: FunctionComponent<Partial<NotifyProps>> & {
   const [showNotify, setShowNotify] = useState(false)
   const cssRef = useRef(null)
   useEffect(() => {
-    if (visible) {
-      show()
-    } else {
-      hide()
-    }
+    visible ? show() : hide()
   }, [visible])
 
   const clickHandle = () => {
@@ -98,26 +94,24 @@ export const Notify: FunctionComponent<Partial<NotifyProps>> & {
     [`${classPrefix}-${type}`]: true,
   })
   return (
-    <>
-      <CSSTransition
-        nodeRef={cssRef}
-        in={showNotify}
-        timeout={300}
-        classNames="fade"
-        unmountOnExit
-        appear
-        position={position}
-        id={id}
+    <CSSTransition
+      nodeRef={cssRef}
+      in={showNotify}
+      timeout={300}
+      classNames="fade"
+      unmountOnExit
+      appear
+      position={position}
+      id={id}
+    >
+      <div
+        className={`${classes} ${className}`}
+        style={style}
+        onClick={clickHandle}
       >
-        <div
-          className={`${classes} ${className}`}
-          style={style}
-          onClick={clickHandle}
-        >
-          {children}
-        </div>
-      </CSSTransition>
-    </>
+        {children}
+      </div>
+    </CSSTransition>
   )
 }
 
diff --git a/src/packages/pagination/pagination.taro.tsx b/src/packages/pagination/pagination.taro.tsx
index 18509c0d4b..03809ff417 100644
--- a/src/packages/pagination/pagination.taro.tsx
+++ b/src/packages/pagination/pagination.taro.tsx
@@ -96,7 +96,7 @@ export const Pagination: FunctionComponent<
       }
     }
     return items
-  }, [currentPage, itemSize, pageCount])
+  }, [currentPage, itemSize, pageCount, ellipse])
 
   // 点击选择 page
   const handleSelectPage = (curPage: number) => {
diff --git a/src/packages/pagination/pagination.tsx b/src/packages/pagination/pagination.tsx
index 5dad4ff529..bf885b0738 100644
--- a/src/packages/pagination/pagination.tsx
+++ b/src/packages/pagination/pagination.tsx
@@ -96,7 +96,7 @@ export const Pagination: FunctionComponent<
       }
     }
     return items
-  }, [currentPage, itemSize, pageCount])
+  }, [currentPage, itemSize, pageCount, ellipse])
 
   // 点击选择 page
   const handleSelectPage = (curPage: number) => {
diff --git a/src/packages/picker/picker.taro.tsx b/src/packages/picker/picker.taro.tsx
index f501bd16c3..8413d53923 100644
--- a/src/packages/picker/picker.taro.tsx
+++ b/src/packages/picker/picker.taro.tsx
@@ -176,7 +176,6 @@ const InternalPicker: ForwardRefRenderFunction<
       case 'multiple':
         return options
       case 'cascade':
-        // 级联数据处理
         return formatCascade(options as PickerOption[], innerValue)
       default:
         return [options]
@@ -201,7 +200,7 @@ const InternalPicker: ForwardRefRenderFunction<
 
   useEffect(() => {
     setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue)
-  }, [innerVisible, selectedValue])
+  }, [innerVisible, selectedValue, innerValue])
 
   useEffect(() => {
     if (innerVisible) {
@@ -216,7 +215,7 @@ const InternalPicker: ForwardRefRenderFunction<
     }
     Taro.getEnv() !== 'WEB' && setCurrentValue(defaultValuesConvert())
     onChange && onChange(setSelectedOptions(), innerValue, columnIndex)
-  }, [innerValue, columnsList, innerVisible])
+  }, [innerValue, columnsList, innerVisible, columnIndex])
 
   const setSelectedOptions = () => {
     const options: PickerOption[] = []
diff --git a/src/packages/picker/picker.tsx b/src/packages/picker/picker.tsx
index 28516ba2be..58911ebcb2 100644
--- a/src/packages/picker/picker.tsx
+++ b/src/packages/picker/picker.tsx
@@ -173,7 +173,6 @@ const InternalPicker: ForwardRefRenderFunction<
       case 'multiple':
         return options
       case 'cascade':
-        // 级联数据处理
         return formatCascade(options as PickerOption[], innerValue)
       default:
         return [options]
@@ -198,7 +197,7 @@ const InternalPicker: ForwardRefRenderFunction<
 
   useEffect(() => {
     setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue)
-  }, [innerVisible, selectedValue])
+  }, [innerVisible, selectedValue, innerValue])
 
   useEffect(() => {
     if (innerVisible) {
@@ -209,7 +208,7 @@ const InternalPicker: ForwardRefRenderFunction<
   // 选中值进行修改
   useEffect(() => {
     onChange && onChange(setSelectedOptions(), innerValue, columnIndex)
-  }, [innerValue, columnsList])
+  }, [innerValue, columnsList, columnIndex])
 
   const setSelectedOptions = () => {
     const options: PickerOption[] = []
diff --git a/src/packages/picker/pickerpanel.taro.tsx b/src/packages/picker/pickerpanel.taro.tsx
index 8a593f9eeb..59f4014bd2 100644
--- a/src/packages/picker/pickerpanel.taro.tsx
+++ b/src/packages/picker/pickerpanel.taro.tsx
@@ -4,6 +4,7 @@ import React, {
   useRef,
   ForwardRefRenderFunction,
   useImperativeHandle,
+  useCallback,
 } from 'react'
 import { PickerOption } from './types'
 import { useTouch } from '@/utils/use-touch'
@@ -47,7 +48,7 @@ const InternalPickerPanel: ForwardRefRenderFunction<
   const [touchDeg, setTouchDeg] = useState('0deg')
   const rotation = 20
   const moving = useRef(false)
-  let timer: number | undefined
+  const timer = useRef<NodeJS.Timeout | number>(0)
 
   const listRef = useRef<any>(null)
   const rollerRef = useRef<any>(null)
@@ -81,45 +82,53 @@ const InternalPickerPanel: ForwardRefRenderFunction<
     setScrollDistance(translateY)
   }
 
-  const setMove = (move: number, type?: string, time?: number) => {
-    let updateMove = move + transformY.current
-    if (type === 'end') {
-      // 限定滚动距离
-      if (updateMove > 0) {
-        updateMove = 0
-      }
-      if (updateMove < -(options.length - 1) * lineSpacing.current) {
-        updateMove = -(options.length - 1) * lineSpacing.current
-      }
+  const setMove = useCallback(
+    (move: number, type?: string, time?: number) => {
+      let updateMove = move + transformY.current
+      if (type === 'end') {
+        // 限定滚动距离
+        if (updateMove > 0) {
+          updateMove = 0
+        }
+        if (updateMove < -(options.length - 1) * lineSpacing.current) {
+          updateMove = -(options.length - 1) * lineSpacing.current
+        }
 
-      // 设置滚动距离为lineSpacing的倍数值
-      const endMove =
-        Math.round(updateMove / lineSpacing.current) * lineSpacing.current
-      const deg = `${
-        (Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation
-      }deg`
+        // 设置滚动距离为lineSpacing的倍数值
+        const endMove =
+          Math.round(updateMove / lineSpacing.current) * lineSpacing.current
+        const deg = `${
+          (Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation
+        }deg`
 
-      setTransform(type, deg, time, endMove)
-      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1)
-    } else {
-      let deg = 0
-      const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation
+        setTransform(type, deg, time, endMove)
+        setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1)
+      } else {
+        let deg = 0
+        const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation
 
-      // picker 滚动的最大角度
-      const maxDeg = (options.length + 1) * rotation
-      const minDeg = 0
-      deg = Math.min(Math.max(currentDeg, minDeg), maxDeg)
+        // picker 滚动的最大角度
+        const maxDeg = (options.length + 1) * rotation
+        const minDeg = 0
+        deg = Math.min(Math.max(currentDeg, minDeg), maxDeg)
 
-      if (minDeg < deg && deg < maxDeg) {
-        setTransform('', `${deg}deg`, undefined, updateMove)
-        setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing.current)) + 1)
+        if (minDeg < deg && deg < maxDeg) {
+          setTransform('', `${deg}deg`, undefined, updateMove)
+          setCurrIndex(
+            Math.abs(Math.round(updateMove / lineSpacing.current)) + 1
+          )
+        }
       }
-    }
-  }
+    },
+    [options.length]
+  )
 
-  const setChooseValue = (move: number) => {
-    chooseItem?.(options?.[Math.round(-move / lineSpacing.current)], keyIndex)
-  }
+  const setChooseValue = useCallback(
+    (move: number) => {
+      chooseItem?.(options?.[Math.round(-move / lineSpacing.current)], keyIndex)
+    },
+    [keyIndex, options, chooseItem]
+  )
 
   // 开始滚动
   const touchStart = (event: React.TouchEvent<HTMLDivElement>) => {
@@ -166,30 +175,33 @@ const InternalPickerPanel: ForwardRefRenderFunction<
     return nDistance
   }
 
-  const modifyStatus = (type?: boolean, val?: string | number) => {
-    const value = val || defaultValue
-    let index = -1
-    if (value) {
-      options.some((item, idx) => {
-        if (item.value === value) {
-          index = idx
-          return true
-        }
-        return false
-      })
-    } else {
-      options.forEach((item, i) => {
-        if (item.value === defaultValue) {
-          index = i
-        }
-      })
-    }
+  const modifyStatus = useCallback(
+    (type?: boolean, val?: string | number) => {
+      const value = val || defaultValue
+      let index = -1
+      if (value) {
+        options.some((item, idx) => {
+          if (item.value === value) {
+            index = idx
+            return true
+          }
+          return false
+        })
+      } else {
+        options.forEach((item, i) => {
+          if (item.value === defaultValue) {
+            index = i
+          }
+        })
+      }
 
-    setCurrIndex(index === -1 ? 1 : index + 1)
-    const move = index === -1 ? 0 : index * lineSpacing.current
-    type && setChooseValue(-move)
-    setMove(-move)
-  }
+      setCurrIndex(index === -1 ? 1 : index + 1)
+      const move = index === -1 ? 0 : index * lineSpacing.current
+      type && setChooseValue(-move)
+      setMove(-move)
+    },
+    [defaultValue, options, setMove, setChooseValue]
+  )
 
   // 惯性滚动结束
   const stopMomentum = () => {
@@ -231,13 +243,13 @@ const InternalPickerPanel: ForwardRefRenderFunction<
     transformY.current = 0
     modifyStatus(false)
     return () => {
-      clearTimeout(timer)
+      clearTimeout(timer.current)
     }
-  }, [options])
+  }, [options, timer, modifyStatus])
 
   useEffect(() => {
     if (itemShow) {
-      setTimeout(() => {
+      timer.current = setTimeout(() => {
         getReference()
       }, 200)
     }
diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx
index 6987e39c9b..dff48b40bc 100644
--- a/src/packages/popup/popup.tsx
+++ b/src/packages/popup/popup.tsx
@@ -288,8 +288,7 @@ export const Popup: FunctionComponent<
   }
 
   useEffect(() => {
-    visible && open()
-    !visible && close()
+    visible ? open() : close()
   }, [visible])
 
   useEffect(() => {
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index ff529046c0..7bc2637aac 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -104,7 +104,7 @@ export const Progress: FunctionComponent<
         }
       }, delay)
     }
-  }, [intersecting])
+  }, [intersecting, percent, delay, lazy])
   const handleWebObserver = () => {
     /// web环境
     if (lazy) {
diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx
index a47ec44fbd..e8ee089214 100644
--- a/src/packages/progress/progress.tsx
+++ b/src/packages/progress/progress.tsx
@@ -99,7 +99,7 @@ export const Progress: FunctionComponent<
         }
       }, delay)
     }
-  }, [intersecting])
+  }, [intersecting, delay, lazy, percent])
 
   useEffect(() => {
     lazy && initObserver()
diff --git a/src/packages/radiogroup/radiogroup.taro.tsx b/src/packages/radiogroup/radiogroup.taro.tsx
index 8548414972..9965e79004 100644
--- a/src/packages/radiogroup/radiogroup.taro.tsx
+++ b/src/packages/radiogroup/radiogroup.taro.tsx
@@ -72,7 +72,7 @@ export const RadioGroup = React.forwardRef(
           />
         )
       })
-    }, [options])
+    }, [options, labelPosition, val2State])
 
     return (
       <RadioContext.Provider
diff --git a/src/packages/radiogroup/radiogroup.tsx b/src/packages/radiogroup/radiogroup.tsx
index 0df2c66f60..36c98743d8 100644
--- a/src/packages/radiogroup/radiogroup.tsx
+++ b/src/packages/radiogroup/radiogroup.tsx
@@ -72,7 +72,7 @@ export const RadioGroup = React.forwardRef(
           />
         )
       })
-    }, [options])
+    }, [options, labelPosition, val2State])
 
     return (
       <RadioContext.Provider
diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx
index f5186f4ad0..ceaf4155f1 100644
--- a/src/packages/range/range.taro.tsx
+++ b/src/packages/range/range.taro.tsx
@@ -116,7 +116,7 @@ export const Range: FunctionComponent<
         setMarksList(list)
       }
     }
-  }, [marks])
+  }, [marks, min, max])
 
   const scope = () => {
     return max - min
diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx
index 328a2d6dc6..f1efd1dcd6 100644
--- a/src/packages/range/range.tsx
+++ b/src/packages/range/range.tsx
@@ -116,7 +116,7 @@ export const Range: FunctionComponent<
         setMarksList(list)
       }
     }
-  }, [marks])
+  }, [marks, min, max])
 
   const scope = () => {
     return max - min
diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx
index bb6d39f955..ce8ad95df7 100644
--- a/src/packages/shortpassword/shortpassword.taro.tsx
+++ b/src/packages/shortpassword/shortpassword.taro.tsx
@@ -115,7 +115,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
       onComplete && onComplete(val)
     }
     setInputValue(format(value))
-  }, [value])
+  }, [value, comLen])
   const sure = () => {
     onConfirm && onConfirm(inputValue)
   }
diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx
index 24a99dc074..8cefbfd8bc 100644
--- a/src/packages/shortpassword/shortpassword.tsx
+++ b/src/packages/shortpassword/shortpassword.tsx
@@ -108,14 +108,14 @@ export const InternalShortPassword: ForwardRefRenderFunction<
     if (visible && autoFocus) {
       onFocus && onFocus()
     }
-  }, [visible])
+  }, [visible, autoFocus])
   useEffect(() => {
     const val = format(value)
     if (val.length >= comLen) {
       onComplete && onComplete(val)
     }
     setInputValue(format(value))
-  }, [value])
+  }, [value, comLen])
   const sure = () => {
     onConfirm && onConfirm(inputValue)
   }
diff --git a/src/packages/sticky/sticky.tsx b/src/packages/sticky/sticky.tsx
index 70ba6510c6..f7a3d62de8 100644
--- a/src/packages/sticky/sticky.tsx
+++ b/src/packages/sticky/sticky.tsx
@@ -50,7 +50,7 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
   })
   useEffect(() => {
     setStickyStyle({ ...stickyStyle, [position]: `${threshold}px`, zIndex })
-  }, [threshold, position, zIndex])
+  }, [threshold, position, zIndex, stickyStyle])
   const [rootStyle, setRootStyle] = useState({})
 
   const getElement = useCallback(() => {
diff --git a/src/packages/swiper/demos/taro/demo2.tsx b/src/packages/swiper/demos/taro/demo2.tsx
index 280fd67ef6..0fa3a9c3b3 100644
--- a/src/packages/swiper/demos/taro/demo2.tsx
+++ b/src/packages/swiper/demos/taro/demo2.tsx
@@ -1,20 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Swiper } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
-  const list = [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
-  ]
+  const list = useMemo(
+    () => [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
+    ],
+    []
+  )
 
   const [asyncList, setAsyncList] = useState<string[]>([])
   useEffect(() => {
     setTimeout(() => {
       setAsyncList(list)
     }, 3000)
-  }, [])
+  }, [list])
   return (
     <Swiper defaultValue={0} indicator>
       {asyncList.map((item, index) => (
diff --git a/src/packages/swiper/effects/focus.tsx b/src/packages/swiper/effects/focus.tsx
index 9a4393827a..734dfb881c 100644
--- a/src/packages/swiper/effects/focus.tsx
+++ b/src/packages/swiper/effects/focus.tsx
@@ -102,7 +102,7 @@ export const useList = (
             : scale
         )
     )
-  }, [count])
+  }, [count, effect, current])
   return [transforms, setTransforms]
 }
 
diff --git a/src/packages/table/useTableSticky.ts b/src/packages/table/useTableSticky.ts
index 7aa1023524..4477e503ef 100644
--- a/src/packages/table/useTableSticky.ts
+++ b/src/packages/table/useTableSticky.ts
@@ -58,7 +58,7 @@ export default function useTableSticky(
     setStickyColumnClassMap(_columnClassMap)
     setStickyLeftWidth(_stickyLeftWidth)
     setStickyRightWidth(_stickyRightWidth)
-  }, [columns])
+  }, [columns, rtl])
 
   const getStickyStyle = useCallback(
     (key: string) => {
diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx
index 07219be285..b67db9a5ee 100644
--- a/src/packages/toast/toast.taro.tsx
+++ b/src/packages/toast/toast.taro.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react'
+import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { Failure, Loading, Success, Tips } from '@nutui/icons-react-taro'
 import Overlay from '@/packages/overlay/index.taro'
@@ -104,12 +104,6 @@ export const Toast: FunctionComponent<
     },
   })
 
-  useEffect(() => {
-    if (innerVisible) {
-      autoClose()
-    }
-  }, [innerVisible, duration])
-
   useCustomEvent(
     id as string,
     ({ status, options }: { status: boolean; options: any }) => {
@@ -133,11 +127,12 @@ export const Toast: FunctionComponent<
   const show = () => {
     setInnerVisible(true)
   }
-  const hide = () => {
+  const hide = useCallback(() => {
     clearTimer()
     setInnerVisible(false)
-  }
-  const autoClose = () => {
+  }, [setInnerVisible])
+
+  const autoClose = useCallback(() => {
     clearTimer()
     if (duration) {
       timer.current = window.setTimeout(() => {
@@ -145,7 +140,13 @@ export const Toast: FunctionComponent<
         hide()
       }, duration * 1000)
     }
-  }
+  }, [duration, hide, setParams])
+
+  useEffect(() => {
+    if (innerVisible) {
+      autoClose()
+    }
+  }, [innerVisible, duration, autoClose])
 
   const clickCover = () => {
     if (closeOnOverlayClick) {
diff --git a/src/packages/tour/tour.taro.tsx b/src/packages/tour/tour.taro.tsx
index 348f5029e7..7ce74bb9da 100644
--- a/src/packages/tour/tour.taro.tsx
+++ b/src/packages/tour/tour.taro.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react'
+import React, {
+  useState,
+  useEffect,
+  ReactNode,
+  FunctionComponent,
+  useCallback,
+} from 'react'
 import type { MouseEvent } from 'react'
 import { Close } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
@@ -100,6 +106,18 @@ export const Tour: FunctionComponent<
 
   const classes = classNames(classPrefix, className)
 
+  const getRootPosition = useCallback(() => {
+    getTaroRectById(list[active].target as string).then((rect: any) => {
+      setMaskRect({
+        top: rect.top,
+        left: rect.left,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height,
+      })
+    })
+  }, [active, list])
   useEffect(() => {
     if (visible) {
       getRootPosition()
@@ -107,28 +125,14 @@ export const Tour: FunctionComponent<
     setActive(0)
     setShowTour(visible)
     setShowPopup(visible)
-  }, [visible])
+  }, [visible, getRootPosition])
 
   useEffect(() => {
     if (visible) {
       setShowPopup(true)
       getRootPosition()
     }
-  }, [active])
-
-  const getRootPosition = () => {
-    getTaroRectById(list[active].target as string).then((rect: any) => {
-      console.log('rect', rect)
-      setMaskRect({
-        top: rect.top,
-        left: rect.left,
-        right: rect.right,
-        bottom: rect.bottom,
-        width: rect.width,
-        height: rect.height,
-      })
-    })
-  }
+  }, [active, visible, getRootPosition])
 
   const maskStyle = () => {
     const { width, height, left, top } = maskRect
@@ -147,7 +151,6 @@ export const Tour: FunctionComponent<
   const maskClose = (e: MouseEvent<HTMLDivElement>) => {
     setShowTour(false)
     setShowPopup(false)
-
     onClose && onClose(e)
   }
 
diff --git a/src/packages/tour/tour.tsx b/src/packages/tour/tour.tsx
index 27e29fbc04..587df4e0f1 100644
--- a/src/packages/tour/tour.tsx
+++ b/src/packages/tour/tour.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react'
+import React, {
+  useState,
+  useEffect,
+  ReactNode,
+  FunctionComponent,
+  useCallback,
+} from 'react'
 import type { MouseEvent } from 'react'
 import { Close } from '@nutui/icons-react'
 import classNames from 'classnames'
@@ -100,6 +106,12 @@ export const Tour: FunctionComponent<
 
   const classes = classNames(classPrefix, className)
 
+  const getRootPosition = useCallback(() => {
+    const el: any = document.querySelector(`#${list[active].target}`)
+    const rect = getRect(el)
+    setMaskRect(rect)
+  }, [active, list])
+
   useEffect(() => {
     if (visible) {
       getRootPosition()
@@ -107,20 +119,14 @@ export const Tour: FunctionComponent<
     setActive(0)
     setShowTour(visible)
     setShowPopup(visible)
-  }, [visible])
+  }, [visible, getRootPosition])
 
   useEffect(() => {
     if (visible) {
       setShowPopup(true)
       getRootPosition()
     }
-  }, [active])
-
-  const getRootPosition = () => {
-    const el: any = document.querySelector(`#${list[active].target}`)
-    const rect = getRect(el)
-    setMaskRect(rect)
-  }
+  }, [active, visible, getRootPosition])
 
   const maskStyle = () => {
     const { width, height, left, top } = maskRect
@@ -139,7 +145,6 @@ export const Tour: FunctionComponent<
   const maskClose = (e: MouseEvent<HTMLDivElement>) => {
     setShowTour(false)
     setShowPopup(false)
-
     onClose && onClose(e)
   }
 
diff --git a/src/packages/video/video.tsx b/src/packages/video/video.tsx
index 6c5dda0762..4f33309434 100644
--- a/src/packages/video/video.tsx
+++ b/src/packages/video/video.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, FunctionComponent } from 'react'
+import React, { useEffect, useRef, FunctionComponent, useCallback } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -57,11 +57,7 @@ export const Video: FunctionComponent<
   const rootRef = useRef<HTMLVideoElement>(null)
   const classes = classNames(classPrefix, className)
 
-  useEffect(() => {
-    init()
-  }, [])
-
-  const init = () => {
+  const init = useCallback(() => {
     if (rootRef.current) {
       const videoRef = rootRef.current
       if (options.autoplay) {
@@ -86,7 +82,11 @@ export const Video: FunctionComponent<
         onPlayEnd && onPlayEnd(videoRef)
       })
     }
-  }
+  }, [onPause, onPlay, onPlayEnd, options.autoplay, options.playsinline])
+
+  useEffect(() => {
+    init()
+  }, [init])
 
   return (
     <div className={classes} {...restProps}>
diff --git a/src/packages/virtuallist/demos/h5/demo1.tsx b/src/packages/virtuallist/demos/h5/demo1.tsx
index 459ed0ae9f..2b12659c8a 100644
--- a/src/packages/virtuallist/demos/h5/demo1.tsx
+++ b/src/packages/virtuallist/demos/h5/demo1.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { VirtualList } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -18,7 +18,7 @@ const Demo1 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemRender = (data: any) => {
     return <p>{data}</p>
   }
@@ -29,7 +29,7 @@ const Demo1 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       containerHeight={500}
diff --git a/src/packages/virtuallist/demos/h5/demo2.tsx b/src/packages/virtuallist/demos/h5/demo2.tsx
index fbb31a98e7..f9ee35478b 100644
--- a/src/packages/virtuallist/demos/h5/demo2.tsx
+++ b/src/packages/virtuallist/demos/h5/demo2.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { VirtualList } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -18,7 +18,7 @@ const Demo2 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemVariable = (data: any, dataIndex: number, index: number) => {
     return <p style={dataIndex % 2 === 0 ? {} : { height: '100px' }}>{data}</p>
   }
@@ -29,7 +29,7 @@ const Demo2 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       list={list}
diff --git a/src/packages/virtuallist/demos/h5/demo3.tsx b/src/packages/virtuallist/demos/h5/demo3.tsx
index 3be8950d97..802037507e 100644
--- a/src/packages/virtuallist/demos/h5/demo3.tsx
+++ b/src/packages/virtuallist/demos/h5/demo3.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { VirtualList } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -18,7 +18,7 @@ const Demo3 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemRender = (data: any) => {
     return <p>{data}</p>
   }
@@ -29,7 +29,7 @@ const Demo3 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       list={list}
diff --git a/src/packages/virtuallist/demos/h5/demo4.tsx b/src/packages/virtuallist/demos/h5/demo4.tsx
index 3175a32b60..22c10b48bc 100644
--- a/src/packages/virtuallist/demos/h5/demo4.tsx
+++ b/src/packages/virtuallist/demos/h5/demo4.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { VirtualList } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -18,7 +18,7 @@ const Demo4 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemVariable = (data: any, dataIndex: number, index: number) => {
     return <p style={dataIndex % 2 === 0 ? {} : { width: '100px' }}>{data}</p>
   }
@@ -29,7 +29,7 @@ const Demo4 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       list={list}
diff --git a/src/packages/virtuallist/demos/taro/demo1.tsx b/src/packages/virtuallist/demos/taro/demo1.tsx
index a34b740e02..0ac1ee1f47 100644
--- a/src/packages/virtuallist/demos/taro/demo1.tsx
+++ b/src/packages/virtuallist/demos/taro/demo1.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { VirtualList } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
@@ -15,7 +15,7 @@ const Demo1 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -28,7 +28,7 @@ const Demo1 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemRender = (data: any) => {
     return <p style={itemStyle}>{data}</p>
   }
@@ -39,7 +39,7 @@ const Demo1 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       itemHeight={50}
diff --git a/src/packages/virtuallist/demos/taro/demo2.tsx b/src/packages/virtuallist/demos/taro/demo2.tsx
index 7fa6f35e3a..28960c2fb0 100644
--- a/src/packages/virtuallist/demos/taro/demo2.tsx
+++ b/src/packages/virtuallist/demos/taro/demo2.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { VirtualList } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
@@ -14,7 +14,7 @@ const Demo2 = () => {
   const [list, setList] = useState<string[]>([])
   const [pageNo, setPageNo] = useState(1)
   const isLoading = useRef(false)
-  const getData = () => {
+  const getData = useCallback(() => {
     const data: string[] = []
     const pageSize = 20
     for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
@@ -27,7 +27,7 @@ const Demo2 = () => {
     setTimeout(() => {
       isLoading.current = false
     }, 30)
-  }
+  }, [pageNo])
   const itemVariable = (data: any, dataIndex: number, index: number) => {
     return (
       <div
@@ -47,7 +47,7 @@ const Demo2 = () => {
   }
   useEffect(() => {
     getData()
-  }, [pageNo])
+  }, [pageNo, getData])
   return (
     <VirtualList
       itemHeight={80}
diff --git a/src/packages/virtuallist/virtuallist.taro.tsx b/src/packages/virtuallist/virtuallist.taro.tsx
index c42d9592d0..6173f33127 100644
--- a/src/packages/virtuallist/virtuallist.taro.tsx
+++ b/src/packages/virtuallist/virtuallist.taro.tsx
@@ -87,36 +87,37 @@ export const VirtualList: FunctionComponent<Partial<VirtualListProps>> = (
 
   const [offSetSize, setOffSetSize] = useState<number>(containerHeight || 0)
 
-  //   初始计算可视区域展示数量
-  useEffect(() => {
-    setPositions((options) => {
-      return { ...options, endIndex: visibleCount() }
-    })
-  }, [itemHeight, overscan, offSetSize])
-
-  useEffect(() => {
-    if (containerHeight) return
-    setOffSetSize(getContainerHeight())
-  }, [containerHeight])
-
-  useEffect(() => {
-    const pos = initPositinoCache(itemHeight + margin, list.length)
-    setPositions(pos)
-  }, [itemHeight, list])
-
   // 可视区域总高度
-  const getContainerHeight = () => {
+  const getContainerHeight = useCallback(() => {
     // 初始首页列表高度
     const initH = (itemHeight + margin) * list.length
     // 未设置containerHeight高度，判断首页高度小于设备高度时，滚动容器高度为首页数据高度，减5为分页触发的偏移量
     return initH < clientHeight
       ? initH + overscan * (itemHeight + margin) - 5
       : Math.min(containerHeight, clientHeight) // Math.min(containerHeight, clientHeight)
-  }
+  }, [clientHeight, itemHeight, margin, list.length, overscan, containerHeight])
+
+  useEffect(() => {
+    if (containerHeight) return
+    setOffSetSize(getContainerHeight())
+  }, [containerHeight, getContainerHeight])
+
   // 可视区域条数
-  const visibleCount = () => {
+  const visibleCount = useCallback(() => {
     return Math.ceil(getContainerHeight() / (itemHeight + margin)) + overscan
-  }
+  }, [getContainerHeight, itemHeight, margin, overscan])
+
+  //   初始计算可视区域展示数量
+  useEffect(() => {
+    setPositions((options) => {
+      return { ...options, endIndex: visibleCount() }
+    })
+  }, [itemHeight, overscan, offSetSize, visibleCount])
+
+  useEffect(() => {
+    const pos = initPositinoCache(itemHeight + margin, list.length)
+    setPositions(pos)
+  }, [itemHeight, list, margin])
 
   const end = () => {
     return start.current + visibleCount()
@@ -136,7 +137,7 @@ export const VirtualList: FunctionComponent<Partial<VirtualListProps>> = (
     if (!items.length) return
     // 更新缓存
     updateItemSize(positions, items, 'height', margin)
-  }, [positions])
+  }, [positions, margin])
 
   // 滚动监听
   const listScroll = (e: any) => {
diff --git a/src/packages/virtuallist/virtuallist.tsx b/src/packages/virtuallist/virtuallist.tsx
index 9b5d0fe9a9..2cdcb742fa 100644
--- a/src/packages/virtuallist/virtuallist.tsx
+++ b/src/packages/virtuallist/virtuallist.tsx
@@ -151,9 +151,7 @@ export const VirtualList: FunctionComponent<Partial<VirtualListProps>> = (
       setOptions({ startOffset, startIndex, overStart, endIndex })
       // 无限下滑
       if (endIndex > list.length - 1) {
-        if (onScroll) {
-          onScroll()
-        }
+        onScroll && onScroll()
       }
     })
   }, [
@@ -169,6 +167,7 @@ export const VirtualList: FunctionComponent<Partial<VirtualListProps>> = (
     horizontal,
     overscan,
     offSetSize,
+    onScroll,
   ])
 
   useEffect(() => {
diff --git a/src/packages/watermark/watermark.taro.tsx b/src/packages/watermark/watermark.taro.tsx
index aec40919ed..8c4a0b2a57 100644
--- a/src/packages/watermark/watermark.taro.tsx
+++ b/src/packages/watermark/watermark.taro.tsx
@@ -1,4 +1,9 @@
-import React, { useState, useEffect, FunctionComponent } from 'react'
+import React, {
+  useState,
+  useEffect,
+  FunctionComponent,
+  useCallback,
+} from 'react'
 import { getSystemInfo, createOffscreenCanvas } from '@tarojs/taro'
 import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider/index.taro'
@@ -81,11 +86,7 @@ export const WaterMark: FunctionComponent<
   })
   const cls = classNames(classes, className)
 
-  useEffect(() => {
-    init()
-  }, [])
-
-  const init = () => {
+  const init = useCallback(() => {
     let ratio = 1
     getSystemInfo().then((res) => {
       ratio = res.pixelRatio
@@ -151,7 +152,29 @@ export const WaterMark: FunctionComponent<
         throw new Error(locale.watermark.errorCanvasTips)
       }
     })
-  }
+  }, [
+    gapX,
+    gapY,
+    width,
+    height,
+    color,
+    image,
+    content,
+    fontSize,
+    fontWeight,
+    rotate,
+    imageWidth,
+    imageHeight,
+    fontFamily,
+    fontStyle,
+    startX,
+    startY,
+    locale.watermark.errorCanvasTips,
+  ])
+
+  useEffect(() => {
+    init()
+  }, [init])
 
   return (
     <div
diff --git a/src/packages/watermark/watermark.tsx b/src/packages/watermark/watermark.tsx
index beab5fb005..f7388facf8 100644
--- a/src/packages/watermark/watermark.tsx
+++ b/src/packages/watermark/watermark.tsx
@@ -1,4 +1,9 @@
-import React, { useState, useEffect, FunctionComponent } from 'react'
+import React, {
+  useState,
+  useEffect,
+  FunctionComponent,
+  useCallback,
+} from 'react'
 import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -80,11 +85,7 @@ export const WaterMark: FunctionComponent<
   })
   const cls = classNames(classes, className)
 
-  useEffect(() => {
-    init()
-  }, [])
-
-  const init = () => {
+  const init = useCallback(() => {
     const canvas = document.createElement('canvas')
     const ratio = window.devicePixelRatio
     const ctx = canvas.getContext('2d')
@@ -131,7 +132,29 @@ export const WaterMark: FunctionComponent<
     } else {
       throw new Error(locale.watermark.errorCanvasTips)
     }
-  }
+  }, [
+    gapX,
+    gapY,
+    width,
+    height,
+    color,
+    image,
+    content,
+    fontSize,
+    fontWeight,
+    rotate,
+    imageWidth,
+    imageHeight,
+    fontFamily,
+    fontStyle,
+    startX,
+    startY,
+    locale.watermark.errorCanvasTips,
+  ])
+
+  useEffect(() => {
+    init()
+  }, [init])
 
   return (
     <div

From a2b8d128ec4dfbad2e99ba1aa85bd87c06e1eeb3 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Fri, 13 Sep 2024 19:59:27 +0800
Subject: [PATCH 2/3] fix: avatarcrapper lint

---
 .../avatarcropper/avatarcropper.taro.tsx         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index 2e10302051..f89c9b8f7c 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -156,10 +156,10 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
   })
 
   useEffect(() => {
-    setCanvasAll({
+    setCanvasAll((canvasAll) => ({
       ...canvasAll,
       cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId),
-    })
+    }))
   }, [])
 
   // 触摸
@@ -174,7 +174,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
-  }, [pixelRatio, state.cropperWidth])
+  }, [pixelRatio, state.cropperWidth, shape])
 
   // 是否是横向
   const isAngle = useMemo(() => {
@@ -342,7 +342,15 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     // 绘制图片
     ctx.drawImage(src as string, x, y, width, height)
     ctx.draw()
-  }, [drawImage, state.scale, state.angle, state.moveX, state.moveY])
+  }, [
+    drawImage,
+    state,
+    canvasAll,
+    space,
+    alipayDraw,
+    showAlipayCanvas2D,
+    webDraw,
+  ])
 
   useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {

From 5e92de033112d97ea3fb96c6db585a5c7d87dffb Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Fri, 13 Sep 2024 22:07:14 +0800
Subject: [PATCH 3/3] fix: collapse taro h5 fixed

---
 src/packages/collapseitem/collapseitem.taro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/collapseitem/collapseitem.taro.tsx b/src/packages/collapseitem/collapseitem.taro.tsx
index 77c4ed5f4a..e3dd82fa49 100644
--- a/src/packages/collapseitem/collapseitem.taro.tsx
+++ b/src/packages/collapseitem/collapseitem.taro.tsx
@@ -145,7 +145,7 @@ export const CollapseItem: FunctionComponent<
     } else {
       toggle()
     }
-  }, [expanded, toggle])
+  }, [expanded])
 
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>