如何正确将RefObject作为useEffect依赖？求教useCallback整合方法

你原来的代码核心问题是：ref.current是可变对象，React不会跟踪它的属性变化，把checkboxRef.current.checked放进useEffect的依赖数组完全无效——就算checkbox的选中状态改变，useEffect也不会重新执行，还会触发ESLint报错。

下面给出两种靠谱的实现方案：

方式一：受控组件（推荐） #

把checkbox的选中状态交给React的useState管理，状态变化会自动触发组件重渲染，useEffect可以直接监听状态值：

import { useState, useEffect } from 'react';

function MenuToggle() {
  // 用state管理菜单展开状态
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    isMenuOpen ? console.log('Menu is open') : console.log('Menu is closed');
  }, [isMenuOpen]); // 监听state变化，触发逻辑执行

  return (
    <input
      type="checkbox"
      checked={isMenuOpen}
      onChange={(e) => setIsMenuOpen(e.target.checked)}
    />
  );
}

方式二：非受控组件（事件监听+useCallback） #

如果必须用ref（比如非受控场景），不要依赖useEffect的依赖数组，直接给checkbox绑定change事件，用useCallback缓存事件处理函数避免不必要的重绑定：

import { useRef, useEffect, useCallback } from 'react';

function MenuToggle() {
  const checkboxRef = useRef<HTMLInputElement>(null);

  // 用useCallback缓存函数，保证每次渲染时引用不变
  const handleToggle = useCallback(() => {
    const isChecked = checkboxRef.current?.checked;
    isChecked ? console.log('Menu is open') : console.log('Menu is closed');
  }, []);

  useEffect(() => {
    const checkbox = checkboxRef.current;
    if (checkbox) {
      // 绑定change事件
      checkbox.addEventListener('change', handleToggle);
      // 组件卸载时清理事件监听
      return () => checkbox.removeEventListener('change', handleToggle);
    }
  }, [handleToggle]); // 依赖缓存后的函数，避免重复绑定

  return <input type="checkbox" ref={checkboxRef} />;
}

为什么原来的写法行不通？ #

ref.current的变化不会触发组件重渲染，useEffect的依赖数组只会在组件渲染时计算一次，后续checkboxRef.current.checked改变，React根本感知不到，自然不会执行useEffect里的逻辑。

useCallback在这里的作用是缓存事件处理函数的引用，避免每次组件渲染都创建新函数，导致useEffect反复执行解绑和绑定操作——不用useCallback功能也能跑，但会有多余的性能开销。

内容的提问来源于stack exchange，提问作者ImEmo