Why Use React.js?

Cedrick CaceresAugust 6, 2024

React.jsJavaScript

The Challenges of Building User Interfaces Without React

Ever wonder what it's like to develop complex web applications using just HTML, CSS, and vanilla JavaScript? Well, when building applications with plain HTML and JavaScript, developers often find themselves writing a lot of code to directly manipulate the DOM (Document-Object Model). Selecting elements, updating content, and handling events manually become increasingly cumbersome and prone to errors.

At first glance, handling a simple task such as updating a single UI element based on user input might seem straightforward:

<!-- HTML --> 

<div id="app"> 
  <input type="text" id="nameInput" /> 
  <p id="greeting">Hello, </p> 
</div>

<!-- JavaScript --> 

<script> 
  document.getElementById('nameInput').addEventListener('input', function (event) { 
    document.getElementById('greeting').textContent = 'Hello, ' + event.target.value; 
  });
</script>

Quite simple, right? But this simplicity is deceiving. Managing the state of an application (the data that drives the UI) without a structured approach can be challenging. In vanilla JavaScript, keeping track of state changes and ensuring that the UI updates correctly often requires intricate and repetitive code.

Imagine you have multiple UI elements that need to reflect the same piece of state. Keeping them in sync can be a headache. Here’s an example:

<!-- HTML -->
<div id="app">
  <button id="incrementBtn">Increment</button>
  <p id="counter">0</p>
</div>


<!-- JavaScript -->
<script>
  let counter = 0;
  document.getElementById('incrementBtn').addEventListener('click', function () {
    counter++;
    document.getElementById('counter').textContent = counter;
  });
</script>

State Management

As your application grows, managing state with vanilla JavaScript becomes increasingly complex. You need to ensure that every piece of state is accurately represented across all relevant parts of your application. This often leads to duplicated code and a high potential for bugs.

For instance, consider an application where multiple components need to reflect the same data. Without a centralized state management system, you might end up write a lot of boilerplate code just to keep everything in sync. This not only makes your codebase larger and harder to maintain but also increases the risk of inconsistencies.

Component Reusability

Creating reusable components is another major challenge. In traditional web development, sharing functionality across different parts of your application isn't straightforward. You often have to duplicate code or create complex patterns to achieve some level of reusability.

For example, suppose you have a styled button that you want to use in multiple places. In vanilla JavaScript and HTML, you would need to define the style and behavior for each instance of the button separately. This leads to code duplication and makes your application harder to maintain.

Chaotic Event Handling

Handling event is also one key factor. Handling events in vanilla JavaScript means attaching event listeners directly to DOM elements. As the number of interactive elements grow, managing these listeners becomes increasingly difficult, leading to what's often referred to as "spaghetti code."

Imagine an application with numerous buttons and input fields, each requiring event listeners. Your code will quickly become cluttered with event handler functions, making it difficult to track which functions are responsible for which elements.

Example:

<!-- HTML -->
<div id="app">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>


<!-- JavaScript -->
<script>
  document.getElementById('btn1').addEventListener('click', function () {
    console.log('Button 1 clicked');
  });


  document.getElementById('btn2').addEventListener('click', function () {
    console.log('Button 2 clicked');
  });
</script>

Rendering Performance

Without a virtual DOM, every change to the UI requires direct manipulation of the actual DOM. This can lead to significant performance bottlenecks, especially in applications with frequent or complex updates. Direct DOM manipulation is inherently slow because the browser needs to reflow and repaint the entire document. Meaning the browser will have to 'read' the entire document to just update a single state.

Consider an application that needs to update a large number of elements frequently. Directly manipulating the DOM for each update can cause noticeable lag and a poor user experience.

<!-- HTML -->
<div id="app">
  <button id="updateBtn">Update</button>
  <div id="items"></div>
</div>


<!-- JavaScript -->
<script>
  document.getElementById('updateBtn').addEventListener('click', function () {
    const itemsContainer = document.getElementById('items');
    itemsContainer.innerHTML = ''; // Clear current items
    for (let i = 0; i < 1000; i++) {
      const newItem = document.createElement('div');
      newItem.textContent = 'Item ' + i;
      itemsContainer.appendChild(newItem);
    }
  });
</script>

These challenges are the reason why library like React is so valuable. React addresses these pain points by providing a declarative syntax, efficent state management, reusable components, centralized event handling, and optimized rendering performance. We can see how React overcomes these issues and why it's become the go-to solution for modern web application.

So, Why React?

Declarative Syntax

React's declarative approach allows you to describe what you want to see on the screen, and React takes care of the updates. This makes your code predictable and easier to debug. You don't need to worry about the specific steps to update the DOM—just the declare the final UI state.

Component-Based Architecture

React encourages building applications using components—a self-contained, reusable pieces of code. Each component manages its own state and can be composed to form more complex UIs. This modular approach makes your codebase more maintainable and scalable.

Virtual DOM

React's virtual DOM is lightweight representation of the real DOM. When you update the UI, React calculates the minimal set of changes required and applies them in a batch. This result in faster and more efficient updates, providing a smoother user experience.

State Management

React's one-way data binding ensures that data flows in a single direction, making it easier to understand and debug. For more complex state management needs, libraries like Redux or Context API can be integrated seamlessly with React.

Event Handling

In React, event handling is done declaratively and at the component level. You don't need to attach event listeners directly to DOM elements. Instead, you define event handlers within your components, making your code more organized and easier to manage.