如何在自定义Hook中安全绕过useEffect的依赖项检测？

针对你遇到的场景，有几个安全可行的处理方式：

1. 优化useConversion内部的函数引用（推荐） #

如果能控制useConversion Hook的实现，把getConversionList用useCallback包裹，保证它的引用稳定。这样添加到useEffect依赖项里就不会触发无限渲染：

// 在useConversion Hook内部实现
const getConversionList = useCallback(async () => {
  // 原GraphQL请求逻辑
}, []); // 根据实际需求添加必要依赖，确保函数引用不频繁变化

之后组件中的代码就可以正常添加依赖：

const { getConversionList } = useConversion();

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

2. 用ESLint注释忽略特定lint错误 #

如果无法修改useConversion，可以直接在useEffect上方添加ESLint注释，明确说明忽略原因，避免后续维护时产生困惑：

const { getConversionList, conversionList } = useConversion();

// eslint-disable-next-line react-hooks/exhaustive-deps -- getConversionList为稳定引用，仅需页面初始化时执行一次
useEffect(() => {
  getConversionList();
}, []);

3. 使用Ref存储函数引用 #

通过useRef存储getConversionList的最新引用，既保证调用的是最新函数，又能让useEffect仅执行一次：

const { getConversionList } = useConversion();
const getConversionListRef = useRef(getConversionList);

// 同步最新的函数引用
useEffect(() => {
  getConversionListRef.current = getConversionList;
});

// 仅初始化执行一次
useEffect(() => {
  getConversionListRef.current();
}, []);

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