[Compiler Bug]: React Compiler bug: closure is lost in `useEffect` when component is returned from a factory (causes `ReferenceError: <identifier> is not defined`)

[budarin]

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://github.com/budarin/react-compiler-bug-repro

Repro steps

1. Create a Vite React TS project with React Compiler enabled.
2. Use a factory function that returns a component and captures injected dependencies (e.g. showWelcomeNotification) in a closure.
3. Inside the returned component, call the injected dependency in a useEffect.
4. Run the dev server; a runtime ReferenceError occurs.

How often does this bug happen?

Every time

What version of React are you using?

19.2.4

What version of React Compiler are you using?

1.0.0

[budarin]

Summary

In a Vite + React 19 project using React Compiler, when a component is created via a factory/DI pattern and captures an injected callback in a closure, invoking that callback inside useEffect(() => { ... }, []) can be transformed incorrectly by the compiler.

The generated code moves the effect callback out of the component scope, leaving the injected identifier unbound in the new function scope. This produces a runtime error like:
ReferenceError: showWelcomeNotification is not defined

Steps to reproduce

1. Create a Vite React TS project with React Compiler enabled.
2. Use a factory function that returns a component and captures injected dependencies (e.g. showWelcomeNotification) in a closure.
3. Inside the returned component, call the injected dependency in a useEffect.
4. Run the dev server; a runtime ReferenceError occurs.

Minimal reproduction (representative)

import { useEffect } from "react";

type Deps = { injectedFn(): void };

export function createContainer(deps: Deps) {
  return function AppContainer() {
    useEffect(() => {
      deps.injectedFn();
    }, []);
    return null;
  };
}

const Container = createContainer({
  injectedFn: () => {
    console.log("Hello");
  },
});

export default Container;

Actual behavior

Runtime crash with ReferenceError: <identifier> is not defined after compilation.

Expected behavior

React Compiler should preserve closure semantics for values injected into components via factory/DI patterns, so that calling the injected callback from within useEffect does not produce unbound identifiers.

Concrete details from the affected project

• The runtime error happens for an identifier injected into a component factory (example: showWelcomeNotification).
• In the compiled output, useEffect(_temp, ...) is generated, where _temp is hoisted as a separate function.
• Inside _temp, the compiler-generated code references showWelcomeNotification() (or similar), but that identifier is not available in _temp’s scope, causing the ReferenceError.

Workaround

Opt-out of React Compiler for the affected component function by adding:

"use no memo";

at the top of the returned component function body.

Environment

• React: 19.2.4
• Vite: 8.x
• React Compiler enabled (via reactCompilerPreset() / compiler runtime)
• Bundler integration used:
  • @vitejs/plugin-react with reactCompilerPreset()
  • @rolldown/plugin-babel with babel presets: [reactCompilerPreset()]

Additional notes

• The same project does not fail when the React Compiler is installed/used via a direct Babel plugin setup (explicit babel-plugin-react-compiler), suggesting the bug is specific to the integration path that uses reactCompilerPreset() in this Vite setup.

[spencerwalsh651-cmyk]

Thanks for bringing this up

…

On Mon, Mar 23, 2026, 4:13 AM Вадим Бударин ***@***.***> wrote: *budarin* left a comment (facebook/react#36128) <#36128 (comment)> Title React Compiler bug: closure is lost in useEffect when component is returned from a factory (causes ReferenceError: <identifier> is not defined) Summary In a Vite + React 19 project using React Compiler, when a component is created via a factory/DI pattern and captures an injected callback in a closure, invoking that callback inside useEffect(() => { ... }, []) can be transformed incorrectly by the compiler. The generated code moves the effect callback out of the component scope, leaving the injected identifier unbound in the new function scope. This produces a runtime error like: ReferenceError: showWelcomeNotification is not defined Steps to reproduce 1. Create a Vite React TS project with React Compiler enabled. 2. Use a factory function that returns a component and captures injected dependencies (e.g. showWelcomeNotification) in a closure. 3. Inside the returned component, call the injected dependency in a useEffect. 4. Run the dev server; a runtime ReferenceError occurs. Minimal reproduction (representative) import { useEffect } from "react"; type Deps = { injectedFn(): void }; export function createContainer(deps: Deps) { return function AppContainer() { useEffect(() => { deps.injectedFn(); }, []); return null; };} const Container = createContainer({ injectedFn: () => { console.log("Hello"); },}); export default Container; Actual behavior Runtime crash with ReferenceError: <identifier> is not defined after compilation. Expected behavior React Compiler should preserve closure semantics for values injected into components via factory/DI patterns, so that calling the injected callback from within useEffect does not produce unbound identifiers. Concrete details from the affected project - The runtime error happens for an identifier injected into a component factory (example: showWelcomeNotification). - In the compiled output, useEffect(_temp, ...) is generated, where _temp is hoisted as a separate function. - Inside _temp, the compiler-generated code references showWelcomeNotification() (or similar), but that identifier is not available in _temp’s scope, causing the ReferenceError. Workaround Opt-out of React Compiler for the affected component function by adding: "use no memo"; at the top of the returned component function body. Environment - React: 19.2.4 - Vite: 8.x - React Compiler enabled (via reactCompilerPreset() / compiler runtime) - Bundler integration used: - @vitejs/plugin-react with reactCompilerPreset() - @rolldown/plugin-babel with babel presets: [reactCompilerPreset()] Additional notes - The same project does *not* fail when the React Compiler is installed/used via a direct Babel plugin setup (explicit babel-plugin-react-compiler), suggesting the bug is specific to the integration path that uses reactCompilerPreset() in this Vite setup. — Reply to this email directly, view it on GitHub <#36128?email_source=notifications&email_token=B7H7RE26KVR2UUWJEEGNY6D4SD53XA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMJQHEYDQNZYGA4KM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#issuecomment-4109087808>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7H7REYADFFLKE2JGKB3W734SD53XAVCNFSM6AAAAACW3YX7SCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCMBZGA4DOOBQHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[josephsavona]

Can you create a playground link that reproduces the issue? https://playground.react.dev/

[budarin]

playground

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAogGaUJyEC+BlMEGBAOiDAgIZ2cBudgDsReAJ5YEBACIIsYAgF4iBNMIBWtPAgAmAMWEAKAJTICANwhpdBekNHCEADxz4mUYXTQRhBONw8OgDCvng86ggwRrryYOZyCiZEIgQE3HiwfpSe3r4EAIJYWKHC4ZHRycCpaSRkVDR0RqbKAHwpfrVpsQoAdOpadHqGpg5d9AA0BADaALomY7UZWQTCUAA264v2IvQiInC+YISl5U4wyv6BIWER50bVnQPaw8LmLUrtj12HwpDrCF66wgAHMjJwABIITYQTgLGqTXbwxwuNyEWKUHgbE63CoCEATEC-ShoEEodDYXCECRSVQABXWUBB6gA8lg8D4-nYmCw2AByABGPAF0IAtFhGczhKLAnRRYdsGgATAAPS6NDHPkOEQPGoqlUKrBKoKcgCyEFi5k4PE2nF2BDAJrAJIQigZTNZ7M5YAWBPAAAsIAB3ACSZSiwhtYBQeBgUAQ9CAA

https://codesandbox.io/p/github/budarin/react-compiler-bug-repro

[budarin]

here is the compliled code from the project

import __vite__cjsImport0_react_compilerRuntime from "/node_modules/.vite/deps/react_compiler-runtime.js?v=4fae2908"; const _c = __vite__cjsImport0_react_compilerRuntime["c"];
import __vite__cjsImport1_react from "/node_modules/.vite/deps/react.js?v=4fae2908"; const useEffect = __vite__cjsImport1_react["useEffect"];
var _jsxFileName = "D:/Projects/react-compiler-bug-repro/src/createAppContainer.tsx";
import __vite__cjsImport2_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4fae2908"; const _jsxDEV = __vite__cjsImport2_react_jsxDevRuntime["jsxDEV"];
export function createAppContainer({ showWelcomeNotification }) {
	var _s = $RefreshSig$();
	const AppContainer = () => {
		_s();
		const $ = _c(3);
		if ($[0] !== "5c261461cd0b89f07668e2e734212e6fb062261e7091e513cd764128ce72a0c7") {
			for (let $i = 0; $i < 3; $i += 1) {
				$[$i] = Symbol.for("react.memo_cache_sentinel");
			}
			$[0] = "5c261461cd0b89f07668e2e734212e6fb062261e7091e513cd764128ce72a0c7";
		}
		let t0;
		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
			t0 = [];
			$[1] = t0;
		} else {
			t0 = $[1];
		}
		useEffect(_temp, t0);
		let t1;
		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
			t1 = /* @__PURE__ */ _jsxDEV("div", { children: "Repro page" }, void 0, false, {
				fileName: _jsxFileName,
				lineNumber: 28,
				columnNumber: 12
			}, this);
			$[2] = t1;
		} else {
			t1 = $[2];
		}
		return t1;
	};
	_s(AppContainer, "OD7bBpZva5O2jO+Puf00hKivP7c=");
	AppContainer.displayName = "AppContainer";
	return AppContainer;
}
function _temp() {
	showWelcomeNotification();
}

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVNBLGlCQUFpQjs7O0FBTzFCLE9BQU8sU0FBU0MsbUJBQW1CLEVBQUVDLDJCQUFpRDs7Q0FDcEYsTUFBTUMscUJBQW1COztFQUFBLE1BQUFDLElBQUFDLEdBQUE7QUFBQSxNQUFBRCxFQUFBO0FBQUEsWUFBQUUsS0FBQSxHQUFBQSxLQUFBLEdBQUFBLE1BQUE7QUFBQUYsTUFBQUUsTUFBQUMsT0FBQUMsSUFBQTs7QUFBQUosS0FBQTs7RUFBQSxJQUFBSztBQUFBLE1BQUFMLEVBQUEsT0FBQUcsT0FBQUMsSUFBQTtBQUdwQkMsUUFBQSxFQUFFO0FBQUFMLEtBQUEsS0FBQUs7U0FBQTtBQUFBQSxRQUFBTCxFQUFBOztBQUZMSixZQUFVVSxPQUVQRCxHQUFHO0VBQUEsSUFBQUU7QUFBQSxNQUFBUCxFQUFBLE9BQUFHLE9BQUFDLElBQUE7QUFFQ0csUUFBQSwyQ0FBSyxjQUFnQjs7Ozs7QUFBQVAsS0FBQSxLQUFBTztTQUFBO0FBQUFBLFFBQUFQLEVBQUE7O0FBQUEsU0FBckJPOzs7QUFHVFIsY0FBYVMsY0FBYztBQUUzQixRQUFPVDs7QUFWa0IsU0FBQU8sUUFBQTtBQUVyQlIsMEJBQXlCIiwibmFtZXMiOlsidXNlRWZmZWN0IiwiY3JlYXRlQXBwQ29udGFpbmVyIiwic2hvd1dlbGNvbWVOb3RpZmljYXRpb24iLCJBcHBDb250YWluZXIiLCIkIiwiX2MiLCIkaSIsIlN5bWJvbCIsImZvciIsInQwIiwiX3RlbXAiLCJ0MSIsImRpc3BsYXlOYW1lIl0sImlnbm9yZUxpc3QiOltdLCJzb3VyY2VzIjpbImNyZWF0ZUFwcENvbnRhaW5lci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBGQyB9IGZyb20gJ3JlYWN0JztcblxudHlwZSBBcHBDb250YWluZXJEZXBzID0ge1xuICBzaG93V2VsY29tZU5vdGlmaWNhdGlvbigpOiB2b2lkO1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIGNyZWF0ZUFwcENvbnRhaW5lcih7IHNob3dXZWxjb21lTm90aWZpY2F0aW9uIH06IEFwcENvbnRhaW5lckRlcHMpOiBGQyB7XG4gIGNvbnN0IEFwcENvbnRhaW5lcjogRkMgPSAoKSA9PiB7XG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIHNob3dXZWxjb21lTm90aWZpY2F0aW9uKCk7XG4gICAgfSwgW10pO1xuXG4gICAgcmV0dXJuIDxkaXY+UmVwcm8gcGFnZTwvZGl2PjtcbiAgfTtcblxuICBBcHBDb250YWluZXIuZGlzcGxheU5hbWUgPSAnQXBwQ29udGFpbmVyJztcblxuICByZXR1cm4gQXBwQ29udGFpbmVyO1xufVxuIl0sImZpbGUiOiJEOi9Qcm9qZWN0cy9yZWFjdC1jb21waWxlci1idWctcmVwcm8vc3JjL2NyZWF0ZUFwcENvbnRhaW5lci50c3gifQ==

[josephsavona]

Hmm, the issue doesn't seem to reproduce on playground. I'm wondering if you're on an older version of the compiler?

[budarin]

Hmm, the issue doesn't seem to reproduce on playground. I'm wondering if you're on an older version of the compiler?

I use to use the latest version babel-plugin-react-compiler@latest

[budarin]

import { defineConfig } from 'vite';
import babel from '@rolldown/plugin-babel';
import { aliases } from './configs/aliases.ts';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
});

[jeessmokat-hue]

I am using the latest version of ***@***.*** On Mon, Mar 23, 2026, 12:36 PM spencerwalsh651-cmyk < ***@***.***> wrote:

…

*spencerwalsh651-cmyk* left a comment (facebook/react#36128) <#36128 (comment)> Thanks for bringing this up On Mon, Mar 23, 2026, 4:13 AM Вадим Бударин ***@***.***> wrote: > *budarin* left a comment (facebook/react#36128) > <#36128 (comment)> > Title > > React Compiler bug: closure is lost in useEffect when component is > returned from a factory (causes ReferenceError: <identifier> is not > defined) > Summary > > In a Vite + React 19 project using React Compiler, when a component is > created via a factory/DI pattern and captures an injected callback in a > closure, invoking that callback inside useEffect(() => { ... }, []) can > be transformed incorrectly by the compiler. > > The generated code moves the effect callback out of the component scope, > leaving the injected identifier unbound in the new function scope. This > produces a runtime error like: > ReferenceError: showWelcomeNotification is not defined > Steps to reproduce > > 1. Create a Vite React TS project with React Compiler enabled. > 2. Use a factory function that returns a component and captures > injected dependencies (e.g. showWelcomeNotification) in a closure. > 3. Inside the returned component, call the injected dependency in a > useEffect. > 4. Run the dev server; a runtime ReferenceError occurs. > > Minimal reproduction (representative) > > import { useEffect } from "react"; > type Deps = { injectedFn(): void }; > export function createContainer(deps: Deps) { > return function AppContainer() { > useEffect(() => { > deps.injectedFn(); > }, []); > return null; > };} > const Container = createContainer({ > injectedFn: () => { > console.log("Hello"); > },}); > export default Container; > > Actual behavior > > Runtime crash with ReferenceError: <identifier> is not defined after > compilation. > Expected behavior > > React Compiler should preserve closure semantics for values injected into > components via factory/DI patterns, so that calling the injected callback > from within useEffect does not produce unbound identifiers. > Concrete details from the affected project > > - The runtime error happens for an identifier injected into a > component factory (example: showWelcomeNotification). > - In the compiled output, useEffect(_temp, ...) is generated, where > _temp is hoisted as a separate function. > - Inside _temp, the compiler-generated code references > showWelcomeNotification() (or similar), but that identifier is not > available in _temp’s scope, causing the ReferenceError. > > Workaround > > Opt-out of React Compiler for the affected component function by adding: > > "use no memo"; > > at the top of the returned component function body. > Environment > > - React: 19.2.4 > - Vite: 8.x > - React Compiler enabled (via reactCompilerPreset() / compiler runtime) > - Bundler integration used: > - @vitejs/plugin-react with reactCompilerPreset() > - @rolldown/plugin-babel with babel presets: [reactCompilerPreset()] > > Additional notes > > - The same project does *not* fail when the React Compiler is > installed/used via a direct Babel plugin setup (explicit > babel-plugin-react-compiler), suggesting the bug is specific to the > integration path that uses reactCompilerPreset() in this Vite setup. > > — > Reply to this email directly, view it on GitHub > < #36128?email_source=notifications&email_token=B7H7RE26KVR2UUWJEEGNY6D4SD53XA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMJQHEYDQNZYGA4KM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#issuecomment-4109087808>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/B7H7REYADFFLKE2JGKB3W734SD53XAVCNFSM6AAAAACW3YX7SCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCMBZGA4DOOBQHA> > . > You are receiving this because you are subscribed to this thread.Message > ID: ***@***.***> > — Reply to this email directly, view it on GitHub <#36128?email_source=notifications&email_token=B7VJNKDLN757P3XKVY47HBD4SEOUTA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMJQHE4TMMBXGUYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#issuecomment-4109960750>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7VJNKDTZMNN7U6MDGU5U7T4SEOUTAVCNFSM6AAAAACW3YX7SCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCMBZHE3DANZVGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>