[Compiler Bug]: Function hoisting ignored in eslint rule react-hooks/immutability

[nifgraup]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAsgJ4DCEAtgA6EKY4AUtMEtYAlEcADrEiUMAgCiaNAlzNmPALwA+XgKKqiaCBFkBuFUQC+XXYID0J9VlwFiAEykAbAIYxH+QmCLOERBBKn4ANwR7Mk8cIhwAC28cDiIINAjoojA4DgQ9DGw3Yg0tHmADIj0YBBxYYkwoe3tjfQEQABoQNMw0PABzFBA8OggYcJwyWm9CgAV7KA68TAB5WhyPfXV2aiIAcgAjR03ggFpaSenMPdLHXD20ujx7BBgTGzwwHHXjAWZ+UxMr2hvXaxIEDsyGKIEcNT4IAEyzA-zA7QQHgmUxm80WRia4EiEAA7gBJJh3TDgsAoNAkhD6IA

Repro steps

eslint rule react-hooks/immutability ignores function hoisting. This

function MyComponent(props) {
  useEffect(() => {
    foo();
  });
  // function declarations are effectively at the top of the scope
  function foo() { } 
  return null;
}

should not cause error

Error: Cannot access variable before it is declared

`foo` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.

How often does this bug happen?

Every time

What version of React are you using?

19.2

What version of React Compiler are you using?

1.0

[josephsavona]

Thanks for posting. JavaScript hoisting is generally challenging to use with memoization, whether automatic or manual. The obvious issue is that you can’t really depend on something that hasn’t been declared yet - this would evaluate a value in the TDZ. In your example, foo would need to be a dependency of the effect, but it can’t be referenced before it’s declared!

As such, React Compiler supports a limited subset of hoisting, and the error in this case is expected. We recommend declaring values before use as much as possible, which is also generally good practice in JS.