[compiler][rfc] Enable hook guards in dev mode by default

[everettbu]

Mirror of facebook/react#32524
Original author: mofeiZ

---

This validation ensures that React compiler-enabled apps remain correct. That is, code that errors with this validation is most likely invalid with React compiler is enabled (specifically, hook calls will be compiled to if-else memo blocks).

Hook guards are used extensively for Meta's react compiler rollouts. There, they're enabled for developers (for dev builds) and on e2e test runs. Let's enable by default for oss as well

Examples of inputs this rule throws on

• Components should not be invoked directly as React Compiler could memoize the call to AnotherComponent, which introduces conditional hook calls in its compiled output.

  function Invalid1(props) {
   const myJsx = AnotherComponent(props);
   return <div> { myJsx } </div>;
  }

• Hooks must be named as hooks. Similarly, hook calls may not appear in functions that are not components or hooks.

  const renamedHook = useState;
  function Invalid2() {
    const [state, setState] = renamedHook(0);
  }
  
  function Invalid3() {
    const myFunc = () => useContext(...);
    myFunc();
  }

• Hooks must be directly called (from the body of a component or hook)

  function call(fn) {
    return fn();
  }
  
  function Invalid4() {
    const result = call(useMyHook);
  }
  

Example of hook guard error (in dev build)

[greptile-apps]

Greptile Overview

Greptile Summary

enabled hook guards in dev mode by default to validate that React compiler-enabled apps follow hook rules correctly

• changed enableEmitHookGuards default configuration to enable guards in dev mode with devonly: true
• added logic in BabelPlugin.ts to conditionally disable guards in production builds when devonly flag is set
• expanded LazyGuardDispatcher to handle additional methods (unstable_useMemoCache, readContext, getCacheSignal, getCacheForType, use) that should bypass guard validation
• updated compatibility layer in $dispatcherGuard to support both legacy (ReactCurrentDispatcher) and new (H) React internals
• added null check for originalDispatcher to handle edge case where hooks are used as first-class values in inner functions
• Critical bug found: line 93 in index.ts always calls useMemoCache instead of the correct dispatcher method from the loop variable

Confidence Score: 0/5

• This PR cannot be merged - contains a critical logic bug that will cause runtime errors
• The bug on line 93 of index.ts will cause all non-hook dispatcher methods (readContext, use, getCacheForType, etc.) to incorrectly call useMemoCache, resulting in runtime errors when these methods are invoked
• Pay immediate attention to compiler/packages/react-compiler-runtime/src/index.ts line 93 - fix required before merge

Important Files Changed

File Analysis

Filename	Score	Overview
compiler/packages/react-compiler-runtime/src/index.ts	1/5	added multiple dispatcher methods to LazyGuardDispatcher, but critical bug on line 93 - always calls useMemoCache instead of the actual method from the key variable
compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts	5/5	changed enableEmitHookGuards default to enable hook guards in dev mode, added devonly field to schema for backwards compatibility
compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts	5/5	added logic to disable hook guards in production when devonly is true, respecting the new configuration option

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: hardcoded useMemoCache call will fail for other dispatcher methods like readContext, use, getCacheForType, etc. - should call (originalDispatcher as any)[key](...args) instead

Suggested change

	return (originalDispatcher as any).useMemoCache(...args);
	return (originalDispatcher as any)[key](...args);

Prompt To Fix With AI

This is a comment left during a code review.
Path: compiler/packages/react-compiler-runtime/src/index.ts
Line: 93:93

Comment:
**logic:** hardcoded `useMemoCache` call will fail for other dispatcher methods like `readContext`, `use`, `getCacheForType`, etc. - should call `(originalDispatcher as any)[key](...args)` instead

```suggestion
      return (originalDispatcher as any)[key](...args);
```

How can I resolve this? If you propose a fix, please make it concise.