[Compiler Bug]: Inconsistent memoization strategy for object with method shorthand vs function properties

[dimaMachina]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgDMoA7OXASwhPyjAQCEoBzACgEp9gAdG-OamALB89XADkIAEwRgANKIS4AolOaz8AX3wBeWvQCC6krgPkqJMBwDcvfPhhLYNHn3sBbBO4gUAXgik5O3t8XFlcAEYOLmCQxQlpWVZHSAAbADcEAGEIVNSKMAswdls3LSCysKEAJmjXOPsxVXUrFNzMnLyCopLY8r6q3ABmVgB9BRJEznqGgUtchAA6VIg2Nozs3PzCwV6yzQr7TV5jkhA5EDnCCmYUEAp3bDxQgE9MBC58AAVUlgoSADymEogi0RBgEHc+AA5AAjACGsIQqQAtJhfsx-ijHPDyCiBI8KKkEDAAPRSAq4aGlXisGak0kEzBE+EgkgAWUSyHw3BA8LyvJOolZBWuGh+f0BwJ61nO4AAFhAAO4ASRMJJI-LAKEIWoQmiAA

Repro steps

React Compiler generates different memoization strategies depending on whether functions in a returned object are defined using method shorthand or function/arrow properties.

In some cases, the compiler memoizes individual functions and reconstructs the object, while in others it memoizes the entire object directly.

Input

export function useBug() {
  const { setNodes, setEdges } = useAgentActions();
  return {
    memoized,
    test1() {
      setNodes(resolveCollisions);
    },
    test2() {
      setEdges(resolveCollisions);
    },
    test3(_, node) {
      console.log(resolveCollisions);
    },
  };
}

Compiled output

import { c as _c } from "react/compiler-runtime";
export function useBug() {
  const $ = _c(3);
  const { setNodes, setEdges } = useAgentActions();
  let t0;
  if ($[0] !== setEdges || $[1] !== setNodes) {
    t0 = {
      memoized,
      test1() { // recreated when cached object is rebuilt
        setNodes(resolveCollisions);
      },
      test2() { // recreated when cached object is rebuilt
        setEdges(resolveCollisions);
      },
      test3(_, node) { // recreated when cached object is rebuilt
        console.log(resolveCollisions);
      },
    };
    $[0] = setEdges;
    $[1] = setNodes;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  return t0;
}

Additional example

Using function expressions and arrow functions as object properties leads to a different memoization strategy:

export function useBug() {
  const { setNodes, setEdges } = useAgentActions();
  return {
    memoized,
    test1: () => {
      setNodes(resolveCollisions);
    },
    test2: function () {
      setEdges(resolveCollisions);
    },
    test3: function TEST(_, node) {
      console.log(resolveCollisions);
    },
  }
}

Compiled output

import { c as _c } from "react/compiler-runtime";
export function useBug() {
  const $ = _c(8);
  const { setNodes, setEdges } = useAgentActions();
  let t0;
  if ($[0] !== setNodes) {
    t0 = () => {
      setNodes(resolveCollisions);
    };
    $[0] = setNodes;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  let t1;
  if ($[2] !== setEdges) {
    t1 = function () {
      setEdges(resolveCollisions);
    };
    $[2] = setEdges;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = function TEST(_, node) {
      console.log(resolveCollisions);
    };
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[5] !== t0 || $[6] !== t1) {
    t3 = { memoized, test1: t0, test2: t1, test3: t2 };
    $[5] = t0;
    $[6] = t1;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  return t3;
}

Conclusion

In this case, the compiler memoizes each function (test1, test2, test3) independently and then reconstructs the object based on those memoized references.

This differs from the method shorthand example, where the compiler memoizes the entire object as a single unit.

How often does this bug happen?

Every time

What version of React are you using?

19

What version of React Compiler are you using?

latest