const foo = () => {};
  const bar = Math.random();

  React.useEffect(() => {
    foo();
    console.log(bar);
  }, []);

Given this code inside a component i get the following es lint warning in my nextjs app

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

I come from working on react router 6 on react 18, from experience i would expect the warning to contain both foo and bar, and then foo should be callbacked to prevent new reference on every render, can someone please explain this to me.

My eslint is standard setup with new react project

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

I originally thought it was cause of react 19 compiler but when researching it seems that has to be turned on explicitly, is this a design decision by next to turn the eslint warning off for functions then it is upto you to determine whether needs to be included or not?