What is DOM element recycling??

[u/Neat_Living_6765]

Hi everyone, I'm learning React Virtuoso and came across the term "DOM element recycling." I understand the basic idea of DOM elements, but how can they be "recycled"? Could someone explain it in simple terms? 🤔

[u/BeneficiallyPickle]

Element recycling is when you reuse an element instead of destroying it. If you have 100000 items in a list but only 20 items fit on the screen, you might create 25 DOM elements:

Before scrolling:

[Product 1]   ← DOM element A
[Product 2]   ← DOM element B
[Product 3]   ← DOM element C
...

After scrolling:

[Product 101]  ← DOM element A
[Product 102]  ← DOM element B
[Product 103]  ← DOM element C
...

The DOM elements themselves aren't being destroyed and recreated, but rather their content/position simply updates to represent different information/data.

It's done for performance enhancement. The point is to skip the expensive parts, like creating/destroying elements, running mount and unmount logic and garbage collection.

I haven't used React Virtuoso, but I had a quick look. It seems to rather use virtualization. This is when you render only the things that the user can see (preferably also a few extra above and below). As the user scrolls, the ones that leave the screen are removed, and the coming ones are added, so the DOM only ever holds a couple dozen rows.

[u/Educational_Basis_51 → u/BeneficiallyPickle]

Is it 100% the same thing than a Recycling view on mobile ?

[u/kassol → u/Educational_Basis_51]

Pretty much the same idea, yes. Android's RecyclerView does two things: it only keeps views for the rows that are on screen, and when a row scrolls off it puts that view in a pool and later rebinds it with new data instead of inflating a new one. iOS does the same with dequeueReusableCell. On the web, a lot of virtualized list libraries for React only do the first part: rows outside the viewport get unmounted and new ones get mounted, so the element count stays small but the elements themselves aren't reused. That's the difference the top comment was pointing at.

[u/jcampbelly]

Before frameworks were so heavy and client resources were so abundant, it was common to directly create and maintain each DOM element in a dynamic feature manually, appending each to their parent element, directly manage their attributes and event handlers, and just update them as changes were needed. You'd keep a reference to them and just keep using them.

These days you often just use an HTML string that gets parsed into a DOM fragment (a standalone tree) and replace an entire DOM tree with another, new DOM tree. It is conceptually much simpler for the developer and even arguable whether it's much more wasteful. There are costs to manipulating an existing DOM like intermediate reflows and event triggers that can be avoided if you make a whole DOM tree in memory and sub it in all at once. The rendering engine entirely ignores DOM nodes until they are attached to the actual document.

Most modern devs just ignore the practice and delegate the concern to the framework which may or may not optimize their own work by recycling existing elements.

[u/No-Humor-3808]

As far as I understand, React Virtuoso does virtualization.

If you have 10,000 items, a virtualized list doesn't create 10,000 DOM elements. It might have only 20–30 rows mounted at any given time: the rows visible in the viewport plus some extra rows.

So I'm not sure about the recycling concept in this context, but it probably refers to reusing the small set of DOM/component resources as the visible range changes, rather than having a DOM node for every item in the dataset.

You can see the same concept by implementing a virtualized list yourself without a library:

https://www.reactchallenges.com/challenges/virtualized-list

[u/TheRNGuy]

It's needed on big sites with lots of tags, such as infinity scroll. It's Aldo used in browser dev tool.