💅 useExhaustiveDependencies does not trigger if dependency is specified after it is used

[Sjlver]

Environment information

CLI:
  Version:                      1.7.0
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.5.1"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "yarn/3.6.3"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Linter:
  Recommended:                  true
  All:                          false
  Rules:                        a11y/useKeyWithClickEvents = "off"
                                correctness/noUnusedImports = "error"
                                correctness/useHookAtTopLevel = "error"
                                suspicious/noExplicitAny = "off"

Workspace:
  Open Documents:               0

Rule name

lint/correctness/useExhaustiveDependencies

Playground link

https://biomejs.dev/playground/?code=IgB1AHMAZQAgAGMAbABpAGUAbgB0ACIAOwAKAAoAaQBtAHAAbwByAHQAIABSAGUAYQBjAHQALAAgAHsAIAB1AHMAZQBDAGEAbABsAGIAYQBjAGsALAAgAHUAcwBlAFMAdABhAHQAZQAgAH0AIABmAHIAbwBtACAAIgByAGUAYQBjAHQAIgA7AAoACgBlAHgAcABvAHIAdAAgAGMAbwBuAHMAdAAgAEYAbwBvAEMAbwBuAHQAZQB4AHQAIAA9ACAAUgBlAGEAYwB0AC4AYwByAGUAYQB0AGUAQwBvAG4AdABlAHgAdAAoAHsACgAgACAAZgBvAG8AOgAgAG4AdQBsAGwAIABhAHMAIABzAHQAcgBpAG4AZwAgAHwAIABuAHUAbABsACwACgAKACAAIABpAHMAQgBhAHIAOgAgACgAKQAgAD0APgAgAGYAYQBsAHMAZQAsAAoAIAAgAGIAYQByAGkAZgB5ADoAIAAoACkAIAA9AD4AIAB2AG8AaQBkACwACgB9ACkAOwAKAAoAZQB4AHAAbwByAHQAIABjAG8AbgBzAHQAIABXAGkAdABoAEYAbwBvACAAPQAgACgAewAgAGMAaABpAGwAZAByAGUAbgAgAH0AOgAgAHsAIABjAGgAaQBsAGQAcgBlAG4AOgAgAFIAZQBhAGMAdAAuAFIAZQBhAGMAdABOAG8AZABlACAAfQApACAAPQA%2BACAAewAKAAkAYwBvAG4AcwB0ACAAWwBmAG8AbwAsACAAcwBlAHQARgBvAG8AXQAgAD0AIAB1AHMAZQBTAHQAYQB0AGUAKAAiACIAKQA7AAoACgAgACAAIAAgAC8ALwAgAEkAbgBjAG8AcgByAGUAYwB0ADoAIABpAHMAQgBhAHIAIABpAHMAIABuAG8AdAAgAHMAcABlAGMAaQBmAGkAZQBkACAAYQBzACAAZABlAHAAZQBuAGQAZQBuAGMAeQAKACAAIAAgACAAYwBvAG4AcwB0ACAAYgBhAHIAaQBmAHkAIAA9ACAAdQBzAGUAQwBhAGwAbABiAGEAYwBrACgAKAApACAAPQA%2BACAAewAKAAkACQBpAGYAIAAoACEAaQBzAEIAYQByACgAKQApACAAcwBlAHQARgBvAG8AKAAiAGIAYQByACIAKQA7AAoACQB9ACwAIABbAF0AKQA7AAoACgAJAGMAbwBuAHMAdAAgAGkAcwBCAGEAcgAgAD0AIAB1AHMAZQBDAGEAbABsAGIAYQBjAGsAKAAoACkAIAA9AD4AIABmAG8AbwAuAHMAdABhAHIAdABzAFcAaQB0AGgAKAAiAGIAYQByACIAKQAsACAAWwBmAG8AbwBdACkAOwAKAAoACQByAGUAdAB1AHIAbgAgACgACgAJAAkAPABGAG8AbwBDAG8AbgB0AGUAeAB0AC4AUAByAG8AdgBpAGQAZQByACAAdgBhAGwAdQBlAD0AewB7ACAAZgBvAG8ALAAgAGkAcwBCAGEAcgAsACAAYgBhAHIAaQBmAHkAIAB9AH0APgAKAAkACQAJAHsAYwBoAGkAbABkAHIAZQBuAH0ACgAJAAkAPAAvAEYAbwBvAEMAbwBuAHQAZQB4AHQALgBQAHIAbwB2AGkAZABlAHIAPgAKAAkAKQA7AAoAfQA7AAoA

Expected result

Biome should recognize dependencies no matter whether they are specified before or after the hook that depends on them.

Biome handles this correctly:

export const WithFoo = ({ children }: { children: React.ReactNode }) => {
  const [foo, setFoo] = useState("");

  const isBar = useCallback(() => foo.startsWith("bar"), [foo]);

  const barify = useCallback(() => {
    if (!isBar()) setFoo("bar");
  }, []);

  return (
    <FooContext.Provider value={{ foo, isBar, barify }}>
      {children}
    </FooContext.Provider>
  );
};

In the above, Biome correctly warns that barify does not specify it's dependency on isBar. However, if I reverse the order of the two functions, Biome produces no warning.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[arendjr]

I think the report is valid, but we need to be careful with how we resolve this one. Simply adding isBar to the list of dependencies in the playground would result in invalid code, since const/let variables cannot be referenced before their declaration. Ideally we still detect this case, but offer a separate suggestion to the user to point out they might want to change the order of declarations.

[Sjlver]

I agree with @arendjr that the fix is not trivial. It's so confusing that JavaScript/TypeScript allows accesses to isBar inside the barify function, but not in the dependency list :/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz has an explanation of this behavior.