warning: React Hook useEffect has a missing dependency-CodePudding

how can i get rid of the warning "React Hook useEffect has a missing dependency" while writing my code ?

This is a part of the code and the warning i get

useEffect(() => {
        if(inactive){
            document.querySelectorAll('.sub-menu').forEach((el) => {
                el.classList.remove("active");
            });
                    }

                    
        props.onCollapse(inactive);
    }, [inactive]);

CodePudding user response：

You need to include props in dependency array.

useEffect(() => {
// your code
}, [props, inactive]);

CodePudding user response：

You should include props.onCollapse as a dependency.

useEffect(() => {
  // ...
}, [props.onCollapse, inactive]) // ✅

You should not pass the entire props object as another answer suggests.

And there is something else happening in your code that also needs attention. See how you are using document.querySelector and classList remove?

 document.querySelectorAll('.sub-menu').forEach((el) => {
  el.classList.remove("active"); // ⚠️ react is not jQuery
});

This is an anti-pattern in react. Instead your Menu component should render submenu classNames as a pure function of the menu state.

function Menu({ items = [], initState = true }) {
  const [active, setActive] = React.useState(initState)
  const onClick = event => { event.stopPropagation(); setActive(!active) }
  return active // ✅ data-driven render
    ? <div className="menu" onClick={onClick}>
        {items.map((item, key) =>
          Array.isArray(item)
            ? <Menu key={key} items={item} />
            : <MenuItem key={key} item={item} />
        )}
      </div>
    : <div className="menu" onClick={onClick}>
        <MenuItem item={items[0]} />
      </div>
}

Run the code below and click some menu items to see them toggle open and closed. Notice useEffect, document.query* and classList effects are not needed.

function Menu({ items = [], initState = true }) {
  const [active, setActive] = React.useState(initState)
  const onClick = event => { event.stopPropagation(); setActive(!active) }
  return active
    ? <div className="menu" onClick={onClick}>
        {items.map((item, key) =>
          Array.isArray(item)
            ? <Menu key={key} items={item} />
            : <MenuItem key={key} item={item} />
        )}
      </div>
    : <div className="menu" onClick={onClick}>
        <MenuItem item={items[0]} />
      </div>
}

function MenuItem({ item }) {
  return <div>{item}</div>
}

const mymenu = [ "Main Menu",
  ["Clothing", "Shirts", "Pants", ["Footwear", "Shoes", "Boots"]],
  ["Accessories", "Bags", "Hats"]
]

ReactDOM.render(<Menu items={mymenu} />, document.querySelector("#app"))

.menu {
  border: 1px solid gray;
  padding: 1rem;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>