Here's a list whose refreshing takes >500ms (normally, there would be a server request).
https://codesandbox.io/s/silent-haze-6ku1v?file=/src/App.js:1268-1275
Problem:
On the one hand, re-using the DOM nodes by assigning straightforward keys to the items (the natural thing to do with ReactJS) quickly leads us to a huge CLS after a few reloads.
On the other hand, re-creating the DOM nodes gives us performance overhead, apart from the fact that preserving good UX now requires caching the data for the items.
Question:
Is there a solution which would solve both the CLS and the performance overhead?