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

One . Error reporting scenario

stay react in , Use useEffect monitor 、 Warning when clearing mouse events . The code is as follows ：

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

Give the following warning ：

intend useEffect When performing the clear function ,homePageRef.current It may have changed . If this ref Point to by React Rendered nodes , take ‘homePageRef.current’ stay useEffect Assign a value to a variable in , Use this variable in the cleanup function .

Two . The solution is as follows

No warning will be given after modifying to the following code

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

（ End ）