[Compiler Bug]: Cannot reassign component props

[otomad]

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/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwGEIBbbOhO3AApg+EhAgAafACMyMfAF8AlPmAAdNviYl8ggIRiI+AGTH8e2TBXrN+UePwBefGpCHXAbg12FG7-hgEXFg2QX87AB5CJgA3AD5wu1UAQRgYMgBPADoSGG5hfEp+AHNcAAtkfABmRSlBAH0pJhVHOPwo2PwAawQMx2AmBTjgQwUIgHpo+KVfW3bJ2ITNJS86BRAJEDhWEiZilBAmHhwCXAzMBFV8AAVKKGKmOgB5TGZWMEVRPK58AHJZaQISgAWkwdwedGBgTIjGB2x4TCKMAWYFwv1WGmE-nG43hmERZDedAAshBiJVXGRKJRXBoFPgwISmGBdggPrd7o8XkSwCsNuAyhAAO4ASQECBgdCpYBQ5EoYAQCiAA

Repro steps

If you want to reassign props (not modify), and use them in a callback function, React Compiler will skip compiling the component. For example:

export default function Component({ foo, bar }) {
	if (!foo && !bar) {
		foo = "foo";
	}

	return (
		<div>
			{Array.from({ length: 3 }, (_, i) => <div key={i}>{foo}</div>)}
		</div>
	);
}

I got this error:

Todo: Support destructuring of context variables

You can also replace the if statement if (!foo && !bar) { foo = "foo"; } with the content itself foo = "foo";, that will also trigger the issue, however it is meaningless.

The modified prop must in a callback, directly use it will work fine. For example, <div>{foo}</div> works fine, and <div>{(() => foo)()}</div> raise an issue.

I think the code above should be automatically converted into the code below which can work properly. Although I can also use the code below directly, it will only cause more trouble.

export default function Component({ foo: _foo, bar }) {
	let foo = _foo;
	if (!foo && !bar) {
		foo = "foo";
	}

	return (
		<div>
			{Array.from({ length: 3 }, (_, i) => <div key={i}>{foo}</div>)}
		</div>
	);
}

How often does this bug happen?

Every time

What version of React are you using?

19.2.1

What version of React Compiler are you using?

1.0.0

[karankumbhare90]

Category: React Compiler core

Description:
React Compiler currently treats destructured props as immutable context variables. When a destructured prop is reassigned and later captured in a callback (e.g., inside Array.from), the compiler emits:

Todo: Support destructuring of context variables

and aborts compilation. The emitted JS is therefore incorrect.

The expected behavior is for the compiler to automatically lift the prop into a mutable local variable, equivalent to manually rewriting:

export default function Component({ foo: _foo, bar }) {
  let foo = _foo;
  if (!foo && !bar) {
    foo = "foo";
  }
  return (
    <div>
      {Array.from({ length: 3 }, (_, i) => <div key={i}>{foo}</div>)}
    </div>
  );
}

Confirmed in the React Compiler Playground: after manually lifting the prop to a mutable local, the compiler generates correct optimized output. This indicates the transformation is feasible for the compiler to perform automatically.

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHaYQDwA4QwAuABACYIBmAhlADamVQZxECWEGJAwhALYEMCDEQAUwEpQgRkJAPpSIAGhIAjajBIBfAJQlgmEiToJG0kgF55igNyGSbSiVEBCRSQBkHki-Uw9BlxGkuZWaCCK4XZBWvYwprBcovZGADxkbABuAHwpwcAAgjAw1ACeAHSUMPzixsIA5kQAFrIAzNoqonIqbHoW2STpWSQA1gilFsBsWtnAilqpAPQZOTqxQWnLWblBOtHrIEogcJyUbPUoIGwChKREpXgI+iQACnRQ9WwYAPJ47JxgbSSap8EgAcnUqgQdAAtHh3p8MDD4tRWDCTgI2CYYFswEQwdFMOJ7ItFhi8FjqP8MABZCAUWThah0OjhTBaEhgKlsMBnBCAt4fL6-algPaHcBNCAAdwAkiIEDAMMywCgaHQwAgtEA

This pattern is valid React code and should not prevent the compiler from optimizing the component.

Workaround:
Manually rename the destructured prop (foo: _foo) and use a mutable local variable.

Versions:
React 19.2.1
React Compiler 1.0.0