Do not hoist jsx referencing a mutable binding

[nicolo-ribaudo]

Q	A
Fixed Issues?	Fixes #10522, fixes #8310
Patch: Bug Fix?	Yes
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

Related tests:

• https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/
• https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment

[jridgewell]

Can't we still hoist to the level of the violation?

let foo = 'hello';
export const Component = () => {
  foo = 'goodbye';
  return <span>{array.map(() => <inner>{foo}</inner>}</span>;
};

[nicolo-ribaudo]

No, we can't. Consider this example:

let foo = 0;
export const Component = () => {
  foo++;
  return Promise.resolve().then(() => <span>{foo}</span>);
};

Component();
Component();

Here both the components should use 2, but if we hoist it the first one will use 1.