title: React component that change of column are remounted/rerendered with dynamically generated columns
body: <p>Here you have my current obsession in a codesandbox. I'm generating columns dynamically depending on screen width to distribute an array of components. Works, but when I resize the screen to change the number of columns, the components are reordered correctly but all the components that change of column are re-rendered. </p>
  
  <p>Resizing screen you'll see in console log that components that change of column are remounted (makes sense). I want to know if there's a way to avoid that (at this point, I'm afraid not with this approach).</p>
  
  <p>After many different tries with useRef, useMemo, etc. (some of them probably crazy, but I had to try), my conclusion so far is that with this approach the component has to be removed from one column and added to the other, so is going to be rerendered no matter what.</p>
  
  <p>Any ideas?</p>
  
  <p><a href="https://codesandbox.io/s/28n127vnj" rel="nofollow noreferrer">https://codesandbox.io/s/28n127vnj</a></p>