Why Was React Created?

When developing dynamic websites, creating interactive and responsive user interfaces can quickly become overwhelming. One of the main difficulties lies in managing the DOM (Document Object Model) efficiently. While the DOM API provides the tools to create and manipulate elements on the page, building complex applications using these low-level operations can be incredibly cumbersome. This is where React comes in. Let's explore why React was created and how it solves these challenges.

The Early Challenges of Vanilla JavaScript

Creating dynamic websites with plain JavaScript (vanilla JS) involves directly manipulating the DOM. This process can get tedious very quickly. For example, let’s imagine building something simple like a to-do app. You don’t just add text to a div; you need to create entire HTML elements— titles, descriptions, buttons—and append them to the DOM.

Here’s a simplified way of how you would do that in vanilla JS:

let newTodo = document.createElement("div");
newTodo.setAttribute("id", "todo-" + idCount++);

let titleDiv = document.createElement("div");
titleDiv.innerHTML = title.value;

let descriptionDiv = document.createElement("div");
descriptionDiv.innerHTML = description.value;

let markDoneButton = document.createElement("button");
markDoneButton.innerHTML = "Mark As Done";
markDoneButton.setAttribute("onclick", `markAsDone(${newTodo.id})`);

newTodo.appendChild(titleDiv);
newTodo.appendChild(descriptionDiv);
newTodo.appendChild(markDoneButton);

document.getElementById('container').appendChild(newTodo);

This works, but as the application grows, so does the complexity. You end up writing lots of repetitive code to handle the creation and appending of elements. Managing dynamic changes like adding, removing, or updating elements becomes harder.

The Problem of State Management and Updates

Another problem is that in real-world applications, the backend often sends data to the frontend, such as a new list of items or updates to existing ones. The challenge is: How do you keep the UI in sync with the changing state?

Let’s say the backend returns an updated list of to-dos. Now, how do we update the DOM efficiently?

Consider the case where the backend returns two to-dos:

[{ title: "Do laundry", description: "Wash and fold clothes" }]

You now need to compare this new list with the old one, find the differences, and update the DOM accordingly. Doing this manually would involve a lot of logic. For instance, one simple approach could be to clear the entire container and re-render everything from scratch. This could look something like this:

document.getElementById('container').innerHTML = ''; // Clear the container

state.forEach(item => {
    const newTodo = createTodoElement(item.title, item.description);
    document.getElementById('container').appendChild(newTodo);
});

While this might seem to work, it's inefficient. What if the backend returns the same list? You still clear the container and render everything again. React solves this problem in a much smarter way.

React and the Virtual DOM

React was created to simplify this process and make it more efficient. One of the key features of React is the Virtual DOM. The Virtual DOM is a lightweight, in-memory representation of the real DOM. Instead of updating the actual DOM directly, React keeps a virtual copy of it in memory. When the state of an application changes, React first updates the Virtual DOM and then compares this new version with the previous one using a process called reconciliation.

This comparison step is known as calculating the diff. It identifies the differences between the old and new Virtual DOMs. React then updates only those parts of the actual DOM that have changed, rather than re-rendering the entire UI. This selective updating makes React far more efficient than directly manipulating the DOM.

By minimizing direct DOM updates, React ensures that the UI is updated quickly and efficiently, even in complex applications with large numbers of elements. This approach also makes the code easier to manage because developers don’t need to manually track changes in the DOM state. React takes care of all the heavy lifting for you.

This approach is much faster and more efficient than clearing the entire DOM and rendering everything from scratch.

A Simple Example of React in Action

Here’s a simple React implementation of the to-do list:

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, title: "Do laundry", description: "Wash and fold clothes" },
    { id: 2, title: "Buy groceries", description: "Milk, eggs, bread" },
  ]);

  function addTodo(title, description) {
    const newTodo = { id: todos.length + 1, title, description };
    setTodos([...todos, newTodo]);
  }

  return (
    <div>
      <input type="text" id="title" placeholder="Enter title" />
      <input type="text" id="description" placeholder="Enter description" />
      <button onClick={() => addTodo("New todo", "Todo description")}>
        Add ToDo
      </button>

      <div id="container">
        {todos.map((todo) => (
          <div key={todo.id}>
            <div>{todo.title}</div>
            <div>{todo.description}</div>
            <button>Mark As Done</button>
          </div>
        ))}
      </div>
    </div>
  );
}

Notice how the code is much cleaner and simpler than manually manipulating the DOM. Instead of worrying about DOM elements, React takes care of it for you. You just need to define the state (todos) and React will automatically re-render the relevant parts of the DOM when the state changes.

The Benefits of React

1. Declarative Syntax: In React, you describe what the UI should look like for a given state. When the state changes, React automatically updates the DOM for you. You don't need to manually append elements or keep track of the DOM.

2. Efficient DOM Updates: React uses the Virtual DOM to calculate the differences between the current and new state. This allows React to efficiently update only the parts of the DOM that have changed.

3. Component-Based Architecture: React encourages a modular, component-based approach to building UIs. This makes your code more maintainable and reusable, especially for large applications.

4. State Management: In React, the UI is driven by state. Whenever state changes, React automatically re-renders the affected parts of the UI, reducing the need for complex DOM manipulation logic.

React was created to solve the complexities of building dynamic user interfaces using vanilla JavaScript. It handles the problems of state management, efficient DOM updates, and code maintainability, making it easier to build scalable and performant web applications. By abstracting away the complexity of manual DOM manipulation, React allows developers to focus on building powerful applications rather than worrying about low-level details.

Thanks a lot for reading!

Cover Photo by Lautaro Andreani on Unsplash