The ref value ‘xxx‘ will likely have changed by the time this effect function runs.If this ref......

一. 报错场景

在react中，使用useEffect监听、清除鼠标事件时出现的警告。代码如下：

import {
     useEffect, useRef } from 'react'
const homePageRef = useRef<HTMLDivElement | null>(null)

useEffect(() => {
    
    if (navigator.userAgent.indexOf('Firefox') === -1) {
    
      homePageRef.current?.addEventListener(
        'mousewheel',
        _.debounce(scrollChange, 100, {
     trailing: false, leading: true }),
        true
      )
    } else {
    
      homePageRef.current?.addEventListener(
        'DOMMouseScroll',
        _.debounce(scrollChange, 100, {
     trailing: false, leading: true }),
        true
      )
    }
    return () => {
    
      if (navigator.userAgent.indexOf('Firefox') === -1) {
    
        homePageRef.current?.removeEventListener('mousewheel', scrollChange, true)
      } else {
    
        homePageRef.current?.removeEventListener('DOMMouseScroll', scrollChange, true)
      }
    }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

报如下警告：

意思是useEffect在执行清除功能时，homePageRef.current可能发生了改变。如果这个 ref 指向由 React 渲染的节点，将 ‘homePageRef.current’ 在useEffect中赋值给一个变量，在清除函数中使用该变量。

二. 解决如下

修改为如下代码后不再报出警告

import {
     useEffect, useRef } from 'react'
const homePageRef = useRef<HTMLDivElement | null>(null)

useEffect(() => {
    
   const homePageHTML = homePageRef.current
   if (navigator.userAgent.indexOf('Firefox') === -1) {
    
      homePageHTML?.addEventListener(
        'mousewheel',
        _.debounce(scrollChange, 100, {
     trailing: false, leading: true }),
        true
      )
    } else {
    
      homePageHTML?.addEventListener(
        'DOMMouseScroll',
        _.debounce(scrollChange, 100, {
     trailing: false, leading: true }),
        true
      )
    }
    return () => {
    
      if (navigator.userAgent.indexOf('Firefox') === -1) {
    
        homePageHTML?.removeEventListener('mousewheel', scrollChange, true)
      } else {
    
        homePageHTML?.removeEventListener('DOMMouseScroll', scrollChange, true)
      }
    }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

（完）