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

Question

If i add the dependency array "fitems" in the dependecy array like its telling me to do, then it causes infinite loop. also if i dont use the spread operator on the array then the warning doesnt show but then the state change doesnt rerender.

Sidebar.tsx

import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import axios from "axios";
import getItems from "./../services/SidebarItems";
import { sidebarInfoUrl } from "./../services/ApiLinks";

function Sidebar() {
  const fItems = getItems();
  const location = useLocation();
  const paths = location.pathname.split("/");
  const [items, setItems] = useState(fItems);

  useEffect(() => {
    axios.get(sidebarInfoUrl).then((response) => {
      const updatedItems = [...fItems]
      updatedItems.forEach((item) => {
        if (item.match === "projects") item.value = response.data.projects;
        else if (item.match === "contacts") item.value = response.data.contacts;
      });
      setItems(updatedItems);
      console.log("here")
    });
  }, []);

  return (
    <div className="sidebar shadow">
      {items &&
        items.map((item) => (
          <Link
            key={item.match}
            to={item.link}
            className={
              paths[2] === item.match ? "sidebar-item active" : "sidebar-item"
            }
          >
            <span>
              <i className={item.icon}></i> {item.title}
            </span>
            {item.value && <div className="pill">{item.value}</div>}
          </Link>
        ))}
    </div>
  );
}

export default Sidebar;

Here is the sidebar items i am getting from getItems().

sidebarItems.ts

const items = () => {
  return [
    {
      title: "Dashboard",
      icon: "fas fa-home",
      link: "/admin/dashboard",
      match: "dashboard",
      value: "",
    },
    {
      title: "Main Page",
      icon: "fas fa-star",
      link: "/admin/main-page",
      match: "main-page",
      value: "",
    },
    {
      title: "Projects",
      icon: "fab fa-product-hunt",
      link: "/admin/projects",
      match: "projects",
      value: "00",
    },
    {
      title: "Contacts",
      icon: "fas fa-envelope",
      link: "/admin/contacts",
      match: "contacts",
      value: "00",
    },
  ];
};

export default items;

What is `getItems()`? You're getting an infinite loop with it as a dependency because it's always returning a new object. — AKX, Feb 04 '21 at 09:37
i have added that part. it just an array of initial values for the sidebar — antoninislam, Feb 04 '21 at 10:01
Thanks bro. i fixed my problem. just had to use that function inside `useMemo ` hook — antoninislam, Feb 04 '21 at 11:04
Since it's a static array, you don't need a function to get it at all. — AKX, Feb 04 '21 at 11:47
Yes. I see that not using the array as function also fixed the problem without the `useMemo` hook. thanks a lot bro. — antoninislam, Feb 04 '21 at 12:34

antoninislam · Accepted Answer · 2021-02-04T12:39:32.240

Thank to AKX. I found my problem. I had to use useMemo Hook so that my getItem() function doesnt cause infinte loop when i add it to dependency array.

const fItems = useMemo(() => {
    return getItems();
  }, []);

instead of

const fItems = getItems();

Another fix is that,
If i dont send the items from SidebarItems.ts as function but as an array then it wont cause the infinte loop even if i dont use useMemo hook.

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

1 Answers1