解决React+TypeScript中useEffect缺失依赖警告：无需禁用lint或添加依赖

问题场景 #

使用React + TypeScript开发，通过自定义Hook useProducts 封装产品数据逻辑，在Products组件中调用Hook的fetchProducts方法初始化数据：

const Products: FC<{}> = () => {
  const productsHook = useProducts();

  useEffect(() => {
    productsHook.fetchProducts();
  }, []);
};

运行ESLint时触发警告：

React Hook useEffect has a missing dependency: 'productsHook'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

不想通过禁用ESLint规则或强行添加依赖的方式解决，以下是更合理的技术方案：

方案1：让自定义Hook返回稳定的方法引用 #

ESLint警告的核心原因是：useProducts每次调用都会返回一个新的对象（productsHook引用每次渲染都变化），而useEffect的空依赖数组要求内部引用的变量必须稳定。

解决方法是在useProducts内部用useCallback包裹fetchProducts，确保方法引用在依赖不变时保持稳定：

// useProducts.ts
import { useCallback, useState } from 'react';

type Product = { /* 定义产品类型 */ };

export const useProducts = () => {
  const [products, setProducts] = useState<Product[]>([]);

  // 用useCallback包裹，确保引用稳定
  const fetchProducts = useCallback(async () => {
    try {
      const res = await fetch('/api/products');
      const data = await res.json();
      setProducts(data);
    } catch (err) {
      console.error('Failed to fetch products:', err);
    }
  }, []); // 这里添加fetchProducts实际依赖的变量，比如请求参数、token等

  return { products, fetchProducts };
};

之后在组件中直接解构方法并添加到依赖数组即可，此时依赖稳定，不会触发不必要的useEffect执行：

const Products: FC<{}> = () => {
  const { fetchProducts } = useProducts();

  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]);
};

方案2：将初始化逻辑移到自定义Hook内部 #

如果fetchProducts是组件初始化时必须执行的逻辑，完全可以把useEffect的逻辑封装到useProducts内部，组件无需关心初始化细节：

// useProducts.ts
import { useEffect, useCallback, useState } from 'react';

type Product = { /* 定义产品类型 */ };

export const useProducts = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const fetchProducts = useCallback(async () => {
    const res = await fetch('/api/products');
    const data = await res.json();
    setProducts(data);
  }, []);

  // 在Hook内部执行初始化请求
  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]);

  return { products, fetchProducts }; // 保留方法供组件手动触发（如果需要）
};

组件中只需调用Hook即可，无需自己编写useEffect：

const Products: FC<{}> = () => {
  const { products } = useProducts();

  return (
    <div>
      {/* 渲染产品列表 */}
    </div>
  );
};

方案3：使用useRef缓存方法引用（特殊场景） #

如果无法修改useProducts的实现（比如第三方Hook），可以用useRef缓存fetchProducts的引用，避免依赖变化：

const Products: FC<{}> = () => {
  const productsHook = useProducts();
  const fetchProductsRef = useRef(productsHook.fetchProducts);

  // 每次渲染更新ref的current值
  useEffect(() => {
    fetchProductsRef.current = productsHook.fetchProducts;
  }, [productsHook]);

  // 初始化调用时使用ref中的方法
  useEffect(() => {
    fetchProductsRef.current();
  }, []);
};

这种方式适合无法修改自定义Hook的场景，但优先推荐前两种方案，因为代码更简洁且符合React Hook的设计原则。

内容的提问来源于stack exchange，提问作者Wai Yan Hein