JSX Outlining

[gsathya]

Adds a new pass to outline nested jsx to a separate function.

There's a lot of improvements we can do in the future:

• For now, we only outline nested jsx inside callbacks, but this can be extended in the future (for ex, to outline nested jsx inside loops).

function Component(arr) {
  const jsx = [];
  for (const i of arr) {
    jsx.push(
      // this nested jsx can be outlined
      <Bar>
        <Baz i={i}></Baz>
      </Bar>,
    );
  }
  return jsx;
}

• Only the JSX expression statements are outlined, none of the other statements that flow into the jsx are outlined. This is a bit tricky as we must only outline non-mutating statements using out effects analysis.

function Component(arr) {
  return arr.map((i) => {
    // this statement should not be outlined
    const y = mutate(i);
    // this statement can be outlined
    const x = { i };
    return (
      <Bar>
        <Baz x={x} y={y}></Baz>
      </Bar>
    );
  });
}

[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	Sep 16, 2024 2:26pm