React项目useEffect出现missing dependency依赖缺失警告如何解决？

该警告由React官方的Hook ESLint校验规则触发，规则要求所有在useEffect内部引用的外部作用域变量、函数都必须声明到依赖数组中，避免出现闭包旧值问题。你当前的代码中useEffect内部调用了组件顶层定义的loadItems函数，但没有将其加入依赖数组，因此触发了警告。
如果你直接将loadItems加入依赖数组，会遇到新的问题：组件每次渲染时都会重新创建loadItems函数，函数引用持续变化会导致useEffect频繁触发不必要的执行。

• 方法1：将loadItems移入useEffect内部（最推荐，无额外性能损耗）
  该方案适合loadItems只在当前useEffect中调用的场景，函数变为useEffect内部作用域变量，不需要额外声明依赖：

import React, { useState, useEffect } from "react";

import Button from "./common/button";
import { splitArray } from "../utility/chunkify";

const BudgetTypesList = ({ types, onDelete, onEdit }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 把loadItems移到useEffect内部
    const loadItems = () => {
      const size = Math.ceil(types.length / 2);
      const chunks = splitArray(types, size);
      setItems(chunks);
    };
    loadItems();
  }, [types]);

   // .... 其余代码不变

• 方法2：用useCallback包裹loadItems（适合需要在useEffect外调用loadItems的场景）
  通过useCallback缓存函数引用，只有当依赖的types变化时才会更新loadItems的引用，不会触发多余的useEffect执行：

// 新增导入useCallback
import React, { useState, useEffect, useCallback } from "react";

import Button from "./common/button";
import { splitArray } from "../utility/chunkify";

const BudgetTypesList = ({ types, onDelete, onEdit }) => {
  const [items, setItems] = useState([]);

  // 用useCallback包裹loadItems，声明依赖为types
  const loadItems = useCallback(() => {
    const size = Math.ceil(types.length / 2);
    const chunks = splitArray(types, size);
    setItems(chunks);
  }, [types]);

  // 把被缓存的loadItems加入依赖数组
  useEffect(() => {
    loadItems();
  }, [loadItems]);

   // .... 其余代码不变

• 方法3：临时禁用校验（不推荐，仅适合明确知道无闭包风险的场景）
  直接通过注释关闭当前行的依赖校验，风险是后续修改loadItems逻辑新增依赖时，ESLint不会再触发提醒，可能出现隐式bug：

useEffect(() => {
  loadItems();
  // 关闭当前useEffect的依赖校验
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [types]);

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