Alias Analysis Problem

In this great talk about React Forget, Sathya Gunasekaran (opens in a new tab) talks about the problem of alias analysis in making a compiler for React.

The following examples show how React Unforget can handle such cases that requires alias analysis.

The first example, is the same code snippet that Sathya shows in his keynote:

Input Code

import { useState } from "react";

function Comp({ a, b }) {
  const x = [];

  x.push(a);

  const y = x;

  y.push(b);

  return <div>n: {x.join(",")}</div>;
}

export default function App() {
  const [state, setState] = useState(1);

  return (
    <div>
      {/* We use a constant value for a, but change b */}
      <Comp a={1} b={state} />
      <button onClick={() => setState((p) => p + 1)}>click</button>
    </div>
  );
}

Open Sandbox

React Unforget Result


export default function App() {
  return <div>Compiling...</div>;
}

Read-only

Open Sandbox

Click here to view the dependency graph

The second example is based on this example provided by Joe Savona in this tweet (opens in a new tab):

Input Code

import { useState } from "react";

export default function CounterWithMutationTracking() {
  const [state, setState] = useState(0);

  let x = [];
  const z = [];
  let y = state % 2 === 0 ? x : z;
  y.push(state);

  return (
    <div>
      <button onClick={() => setState(state + 1)}>Increment</button>
      {y[0]}
      <br />
      x: {JSON.stringify(x)}
      <br />
      y: {JSON.stringify(y)}
    </div>
  );
}

Open Sandbox

React Unforget Result


export default function App() {
  return <div>Compiling...</div>;
}

Read-only

Open Sandbox

Click here to view the dependency graph

Examples Component with Early Return