I couldn't fully understand that situation, can anyone explain in details this situation to me with or without code, what is the problem to get that data asynchronously from multiple sources and just append it to a certain element in the DOM??

Let's say we have a shopping cart:

<span class="total">1</span>
<ul class="products">
  <li class="product">
    Product 1
    <span class="quantity">2</span>
    <span class="price">10 EUR</span>
  </li>
</ul>

When we add something to our cart, a request is sent to the server. The server does some validation & business logic, then sends the new cart back to the client.

const addToCart = async (product) => {
  try ( 
    // send data and waits for a response
    // returns a array with objects 
    // eg: [{}, {}, ...]
  ) catch ( 
    ...
  )
}

// on some event:
  cart = addToCart({ product: 1, quantity: 5 })

In vanilla JavaScript we now need to update a lot of DOM elements.

It could look something like:

const productsElm = document.querySelector(".products");
productsElm.innerHTML = '';

cart.forEach( (product) => {
  const product = document.createElement('li')
  const quanity = document.createElement('span')
  const price = document.createElement('span')
  product.innerHtml = product.name
  product.append(quanity)
  product.append(price)
  productsElm.append(pro)
} 

document.querySelector(".quantity").innerHtml = cart.length

In this example we empty the cart and rebuild it with the data we received from the server

This is already hard to scale and maintain.

Let's now say we get our responses from a web socket that constantly send changes from the server to the client, maybe we have a couple web shops with a linked cart.

First come the products from Shop A, 3 seconds later come the products from Shop B

We now run in the several problems, for example:

• We can't clear the DOM element anymore since it's now our state.
• We can't append it since there is a possible the same product is added, in that case we should only update the quantity.

So now we need to write complex code just to update the cart.

The REACT ecosystem solves this problem by introducing Reactivity to JavaScript, because of this we as developers do not need to worry about updating DOM elements anymore.