3

enter image description here

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?

grebenyuksv
  • 1,729
  • 2
  • 12
  • 9

0 Answers0