Component caching and react ids

[jbrantly]

Consider a simple cached component:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }

  componentCacheKey() {
    return this.props.name;
  }
}

And usage like this:

const people = [{id: 0, name: 'Joe'}, {id: 1, name: 'Mary'}, {id: 2, name: 'Joe'}]

class App extends React.Component {
  render() {
    return <div>
      {people.map(person => <Hello key={person.id} name={person.name} />)}
    </div>
  }
}

If you were to run the above with SSR, React will complain that there was a difference between the client and the server when rendering. The issue is that the caching key only looks at the name prop but the actual output from the cache also contains the react id which includes the key from the first Hello component. When the second Hello component is rendered with the same name but a different key, the id is incorrect.

As an FYI, I know there have been some recent changes to React to remove the id on the clientside, and I believe I recall reading somewhere that they might be able to remove the ids in SSR as well which would address this issue.