React Hook useEffect has a missing dependency warning

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

Himanshu Singh · Accepted Answer · 2021-12-03 04:58:26Z

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

answered Dec 3, 2021 at 4:58

Himanshu Singh

1,9738 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Hook useEffect has a missing dependency warning

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related