performance pitfall: close over an object (instead properties)

[tho-graf]

Hi there,

we’re using the React Compiler in our new project (@ meisterplan.com), which has about 23k lines of code, and overall it’s working really well!

We did run into one issue: we accidentally closed over an entire context object that contains both state and update functions. In our case, we don’t actually read the state - we only call one of the functions.

When we close over the whole context, the compiler invalidates the cache even though the function we call hasn’t changed. This makes sense, since the compiler can’t know what we’re doing with the optimisticChanges object.
But when we pass only the specific function reference, everything works as expected and the cache is invalidated only when that function actually changes.

With useMemo, this was easy to see in the dependency array - but of course "painful". With the compiler, both versions look almost the same in code but behave very differently.

Do you think the compiler could improve its handling here? Or could a lint rule warn when a full context object is unnecessarily closed over?

Looking forward to your thoughts.

export function Test() {
  const optimisticChanges = useOptimisticChanges();
  return <>
    <BadBecasueItWillRerenderWhenStateChanges features={() => optimisticChanges.addOptimisticChange()} />
    <WillNeverRerenderBecauseFunctionNeverChanges features={optimisticChanges.addOptimisticChange} />
  </>
}

import { c as _c } from "react/compiler-runtime";
export function Test() {
  const $ = _c(7);
  const optimisticChanges = useOptimisticChanges();
  let t0;
  if ($[0] !== optimisticChanges) {
    t0 = (
      <BadBecasueItWillRerenderWhenStateChanges
        features={() => optimisticChanges.addOptimisticChange()}
      />
    );
    $[0] = optimisticChanges;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  let t1;
  if ($[2] !== optimisticChanges.addOptimisticChange) {
    t1 = (
      <WillNeverRerenderBecauseFunctionNeverChanges
        features={optimisticChanges.addOptimisticChange}
      />
    );
    $[2] = optimisticChanges.addOptimisticChange;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] !== t0 || $[5] !== t1) {
    t2 = (
      <>
        {t0}
        {t1}
      </>
    );
    $[4] = t0;
    $[5] = t1;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  return t2;
}