What is the real problem solved by React?

user_11114658 0
Viewed 75

I know this can be a classic question, but i really couldn't get a real answer from anyone, i seek a detailed example or a situation that proves that React solved a real problem. i understand the part of reusability, declarative style, but still lost in that words React website always tells about React "We built React to solve one problem: building large applications with data that changes over time.”

A discussion on the React Podcast4 mentions that the creator of React—Jordan Walke—was solving a problem at Facebook: having multiple data sources update an autocomplete field. The data came asynchronously from a back end. It was becoming more and more complicated to determine where to insert new rows in order to reuse DOM elements. Walke decided to generate the field representa- tion (DOM elements) anew each time. This solution was elegant in its simplicity: UIs as functions. Call them with data, and you get rendered views predictably.

This is good but still can't fully digest it, what is the real problem that created React in its creator mind,

what does this exactly mean ?

"It was becoming more and more complicated to determine where to insert new rows in order to reuse DOM elements"

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??

reactjs javascript
1 Answers

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.

user_12982890
Related