[Mistake]: The React compiler cannot memoize a callback function inside a loop, contrary to what the docs claim

[DCzajkowski]

Summary

The React Compiler docs claim that a callback inside a loop will be auto-memoized.

I was very surprised to learn this, because that callback captures the item, meaning every callback in that loop has a different context. This would most likely require a use of WeakMap to store each callback's reference for each item.

In the React Compiler Playground, it seems the callback is not memoized and no form of collection for callbacks is used: playground.react.dev demo

I've also conducted tests in this repo with live demo available.

---

I've also seen this example in your presentation @poteto at ReactConf, so I am tagging you here. Maybe you can point me in the right direction (am I missing something)?

---

P.S. In the same example, the docs also claim, that React.memo can be omitted. However, that does not seem to be the case in both the Compiler Playground and tests in my repo.

Page

https://react.dev/learn/react-compiler/introduction#before-react-compiler

Details

No response

[DCzajkowski]

It seems like the compiler has heuristics when to memo a component. In my example, it didn't consider items inside to be worthy of memoization, so it skipped memoizing them. However, with an example of many items and expensive work, it actually does memoize correctly.

For anyone wondering, the example with the loop...

function ExpensiveComponent({ data }) {
  const processedItem = expensiveProcessing(data)

  return (
    <div>
      {processedItem.map(item => (
        <Item key={item.id} onClick={() => console.log(item)} />
      ))}
    </div>
  )
}

...becomes:

Compiler output

function ExpensiveComponent(t0) {
  const $ = _c(5);
  if ($[0] !== "e0600f28278045aacf21c97ef04163df68804a3ff5bf39dd25978f0cb4ffc9b2") {
    for (let $i = 0; $i < 5; $i += 1) {
      $[$i] = Symbol.for("react.memo_cache_sentinel");
    }
    $[0] = "e0600f28278045aacf21c97ef04163df68804a3ff5bf39dd25978f0cb4ffc9b2";
  }
  const {
    data
  } = t0;
  let t1;
  if ($[1] !== data) {
    const processedItem = expensiveProcessing(data);
    t1 = processedItem.map(_temp);
    $[1] = data;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== t1) {
    t2 = /* @__PURE__ */ jsxDEV("div", { children: t1 }, void 0, false, {
      fileName: "[REDACTED]",
      lineNumber: 57,
      columnNumber: 10
    }, this);
    $[3] = t1;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  return t2;
}
function _temp(item) {
  return /* @__PURE__ */ jsxDEV(Item, { onClick: () => console.log(item) }, item.id, false, {
    fileName: "[REDACTED]",
    lineNumber: 67,
    columnNumber: 10
  }, this);
}

Compiler output (simplified)

function mapper(item: Item) {
  return <Item key={item.id} onClick={() => console.log(item)} />
}

function ExpensiveComponent({ data }) {
  const processedItem = expensiveProcessing(data)

  return (
    <div>
      {processedItem.map(mapper)}
    </div>
  )
}

Which is roughly equivalent to pre-compiler:

const Mapper = memo(function Mapper({ item }) {
  return <Item key={item.id} onClick={() => console.log(item)} />
})

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  const processedItem = useMemo(() => expensiveProcessing(data), [data])

  return (
    <div>
      {processedItem.map((item) => <Mapper key={item.id} item={item} />)}
    </div>
  )
})