Memoization of collection items

[JeremyGoodwinKaizen]

Hi all,

First off, thanks for amazing work on React Compiler. I have been using it for the past couple of months and it's doing a much better job than me if I were to do it manually!

The React team have probably already thought about this, but I've not seen it mentioned anywhere. Are there any plans to help memoize individual items of a collection?

Take the following code:

const BigTable = () => {
  const rows = useRows();
  return <Table>
    {rows.map(row => (
      <tr>
        <td>{row.name}</td>
        ...lots more cells...
      </tr>
    ))}
  </Table>;
}

https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAIQEsBzAFQEMAjAGwVwF5cAKASgYD5dgAdDXXdFjwwIAdzANcUMAgBKYsKwDcvfjATZYfADwUaCdqv5cR4gHQBbcgAcmpjsyPHc27DEN9nx1wBN2wUzMMcgsEAF9tAHpsPycvMwTqCGwJCwh1AQRqajAEszj+KLcPZxYWMKMovVp2FQwwkDCgA

React Compiler memoizes the value of rows (the entire collection) which is great, but even if a single row changes, the entire table is re-rendered.

A manual solution to this problem is to extract the row in to it's own component:

const BigTable = () => {
  const rows = useRows();
  return <Table>
    {rows.map(row => <Row key={row.id} row={row} />)}
  </Table>;
}

const Row = (row) => {
  return <tr>
    <td>{row.name}</td>
    ...lots more cells...
  </tr>
}

https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAIQEsBzAFQEMAjAGwVwF5cAKASgYD5dgAdDXXdFjwwIAdzANcUMAgBKYsKwDcvfjATZYfADwUaCdqv5cR4gHQBbcgAcmpjrm3zRuANYIAnvWCmzhACYAvrim3qbBAPTsLIFG2hF6tOwqGLEYvII4uM6SdmJs9Jw8fCEaWo7YMIYl-NrY-uw+YmYY5BYIgfH11ca4Zv3UENgSFhDqAgjU1GD9ZnERldVpIIFAA

Now rows which haven't changed won't get traversed.

I was thinking it would incredibly neat if React Compiler could do something like this automatically. I find myself often writing and preferring code like my first example which has the entire table within one component, and it would be awesome if it could be as efficient as my second example.

Cheers!