[Compiler Bug]: Component defined inside function cause incorrect optimization #33978
Description
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-compiler (build issue installing or using the eslint plugin)
- react-compiler-healthcheck (build issue installing or using the healthcheck script)
Link to repro
Repro steps
Source code:
import React from 'react';
export function getInput(a) {
const Wrapper = () => {
const handleChange = () => {
a.onChange();
};
return (
<input
onChange={handleChange}
>
</input>
);
};
return Wrapper
}
After React Compiler, the handleChange function was hoisted with function level variables(here is the argument a, but it can be any variables defined inside getInput)
import { c as _c } from "react/compiler-runtime";
import React from "react";
export function getInput(a) {
const Wrapper = () => {
const $ = _c(1);
const handleChange = _temp;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = <input onChange={handleChange} />;
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
};
return Wrapper;
}
function _temp() {
a.onChange(); // a is not defined in this scope
}
How often does this bug happen?
Every time
What version of React are you using?
React 18
What version of React Compiler are you using?
19.1.0-rc.2