fix(react-compiler): optimize components declared with arrow function and implicit return and compilationMode: 'infer'

[dimaMachina]

fixes #31601 #31639 cc @josephsavona

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 30, 2024 9:16am

[josephsavona]

Thanks for the contribution! Please see comments

[josephsavona]

I missed this PR the first time around, my apologies. This is an overly narrow solution and needs to be more robust. Let's do the following:

1. Extract out a helper that takes an Expression and returns a boolean for whether its possibly a React node or not. This can reuse the switch (argument.type) { ... } from the current ReturnStatement case.
2. Reuse this helper in the existing ReturnStatement case
3. Expand the ArrowFunctionExpression case to check if the body is an expresssion, and if so use the new helper. otherwise traverse with skipNestedFunctions.

[dimaMachina]

No worries Joseph, thanks for your detailed feedback 🤩

Extract out a helper that takes an Expression and returns a boolean for whether its possibly a React node or not. This can reuse the switch (argument.type) { ... } from the current ReturnStatement case.

extracted as isNonNode function in d0f5b19

react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

Lines 996 to 1010 in d0f5b19

	function isNonNode(node?: t.Expression | null): boolean {
	if (!node) {
	return true;
	}
	switch (node.type) {
	case 'ObjectExpression':
	case 'ArrowFunctionExpression':
	case 'FunctionExpression':
	case 'BigIntLiteral':
	case 'ClassExpression':
	case 'NewExpression': // technically `new Array()` is legit, but unlikely
	return true;
	}
	return false;
	}

Reuse this helper in the existing ReturnStatement case

react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

Lines 1029 to 1032 in d0f5b19

	ReturnStatement(ret) {
	hasReturn = true;
	returnsNonNode = isNonNode(ret.node.argument);
	},

Expand the ArrowFunctionExpression case to check if the body is an expresssion, and if so use the new helper. otherwise traverse with skipNestedFunctions.

I can't get this to work, seems node.traverse#ArrowFunctionExpression isn't called for the root node

[dimaMachina]

also removed useless hasReturn variable in e0c9364

[dimaMachina]

@josephsavona friendly ping

[josephsavona]

Thanks for the fix!