💅 `useExhaustiveDependencies` error's when (adding and not adding) to array

[Yashu Mittal]

Environment information

I am getting this error `This hook does not specify all of its dependencies: toggleSidebar` from a component, being used inside `useMemo`


{useMemo(
  () => (
    <SideDrawer
      closeSideDrawer={() => toggleSidebar(null)}
    />
  ),
  [drawer],
)}


If I add `toggleSidebar` to the dependency array, the above error goes away.

But a new error pops in, and says.

`toggleSidebar changes on every re-render and should not be used as a hook dependency.`

Rule name

lint/correctness/useExhaustiveDependencies

Playground link

https://biomejs.dev/playground/?lintRules=all&code=aQBtAHAAbwByAHQAIAB7ACAAdQBzAGUATQBlAG0AbwAgAH0AIABmAHIAbwBtACAAIgByAGUAYQBjAHQAIgA7AAoACgBmAHUAbgBjAHQAaQBvAG4AIABTAGkAZABlAEQAcgBhAHcAZQByACgAewAgAGMAbABvAHMAZQBTAGkAZABlAEQAcgBhAHcAZQByACAAfQApACAAewAKACAAIAByAGUAdAB1AHIAbgAgADwAYgB1AHQAdABvAG4AIABvAG4AQwBsAGkAYwBrAD0AewAoACkAIAA9AD4AIABjAGwAbwBzAGUAUwBpAGQAZQBEAHIAYQB3AGUAcgAoACkAfQAgAHQAeQBwAGUAPQAiAGIAdQB0AHQAbwBuACIAIAAvAD4AOwAKAH0ACgAKAGYAdQBuAGMAdABpAG8AbgAgAFMAaQBkAGUAYgBhAHIAKAApACAAewAKACAAIABmAHUAbgBjAHQAaQBvAG4AIAB0AG8AZwBnAGwAZQBTAGkAZABlAGIAYQByACgAKQAgAHsACgAgACAAIAAgAHIAZQB0AHUAcgBuADsACgAgACAAfQAKACAAIAAKACAAIAByAGUAdAB1AHIAbgAgACgACgAgACAAIAAgADwAZABpAHYAPgAKACAAIAAgACAAIAAgAHsAdQBzAGUATQBlAG0AbwAoAAoAIAAgACAAIAAgACAAIAAgACgAKQAgAD0APgAgACgACgAgACAAIAAgACAAIAAgACAAIAAgADwAUwBpAGQAZQBEAHIAYQB3AGUAcgAgAGMAbABvAHMAZQBTAGkAZABlAEQAcgBhAHcAZQByAD0AewAoACkAIAA9AD4AIAB0AG8AZwBnAGwAZQBTAGkAZABlAGIAYQByACgAbgB1AGwAbAApAH0AIAAvAD4ACgAgACAAIAAgACAAIAAgACAAKQAsAAoAIAAgACAAIAAgACAAIAAgAFsAZAByAGEAdwBlAHIALAAgAHQAbwBnAGcAbABlAFMAaQBkAGUAYgBhAHIAXQAsAAoAIAAgACAAIAAgACAAKQB9AAoAIAAgACAAIAA8AC8AZABpAHYAPgAKACAAIAApADsACgB9AAoA

Expected result

NIL

Code of Conduct

• I agree to follow Biome's Code of Conduct

[Yashu Mittal]

Wasn't exactly sure, what should be the issue title.

[Ze-Zheng Wu]

This is a react usage problem. Please search for relative knowledge:

1. https://stackoverflow.com/questions/56492261/the-function-makes-the-dependencies-of-useeffect-hook
2. https://dev.to/amitaldo/function-makes-the-dependencies-of-useeffect-hook-change-on-every-render-warning-in-react-35hd

In your case, you should wrap your function in a useCallback hook or define it outside of the component.

[Arend van Beelen jr.]

For reference, there was a similar issue reported last week: #3057