frankieyan

React Compiler: memoization gap when hook calls separate a value from its hook consumer

Summary

The React Compiler silently skips memoization of a derived value when hook calls appear between the value's definition and a hook that consumes it. This produces correct but unnecessarily unstable references, which can break patterns that depend on referential stability (e.g., useConditionalEffect in drag-and-drop).

The compiler reports no errors or warnings. The file compiles cleanly and passes react-compiler-tracker --check-files. The only signal is a runtime behavioral regression.

How we found it

frankieyan

import { StateService } from "angular-ui-router";

class Blah {
  /* @ngInject */
  constructor(
    private AlertManager: any,
    private $state: StateService;
    private $sce: angular.ISCEService,
  ) {}