React Hook useEffect 缺少依赖项警告

Question

In a React app I get this warning on a few components in the useEffect function. I have seen other SO questions but still cant see a fix.

React Hook useEffect has a missing dependency: 'loadItems'. Either include it or remove the dependency array

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();
  }, [types]);

  const loadItems = () => {
    const size = Math.ceil(types.length / 2);
    const chunks = splitArray(types, size);
    setItems(chunks);
  };

   .... rest of code here

Answer 1

UseEffect suggests to declare all the function/values as a dependency.

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(() => {
    const loadItems = () => { //<---move this function inside useEffect
      const size = Math.ceil(types.length / 2);
      const chunks = splitArray(types, size);
      setItems(chunks);
    };
    loadItems();
  // you can use this to `disable comment` any such unnecessary warnings
  // eslint-disable-next-line 
  }, [types]); //<--- It will also show it for setItems now,

  

   .... rest of code here