I was super excited when I checked my email to see I had been accepted into HNG internship. HNG internship is an 8-week program for immediate and advanced learners looking to start a tech career. You can sign up for a free or paid version of the internship.
Now let's explore what this article is and what you will gain by the end of this article. In this article, we'll uncover what React solves and what it is. We'll also explore why React remains highly popular, despite its drawbacks.
As Facebook's user base began to grow in its early days, the platform faced the challenge of ensuring fast and consistent updates to its UI. This issue became known as the "Phantom Problem." Let's explore a common example on the Facebook website: a user receives a new message and decides to respond via the notification panel instead of clicking on the chat section. Sometimes, the user still sees the previous message count rather than the app's current state. This issue highlights the lack of synergy between JavaScript and the DOM. React was developed to provide a consistent way of updating the UI, and solving this problem became its core strength.
To understand what is React let's go to the docs. React is defined as a UI declarative library. This definition doesn't say much and it might be a little bit much for a beginner. Now let's begin to unpack UI means user interface, it means the visual aspect of a website. Declarative there means the paradigms react uses. Paradigms are the way a code is written. In computer science, there are two fundamental paradigms: imperative and declarative. Declarative specifies what the result should be, leaving the details of how to achieve it to the underlying system. Imperative specifies how to perform tasks through step-by-step instructions.
React embraces the declarative paradigms because you focus on describing the desired outcome. In React, you describe the desired UI state using JSX (JavaScript XML). This code defines what the UI should look like, and React efficiently updates the DOM (Document Object Model) to match that state. You don't have to write imperative code to modify individual DOM elements.
What makes this possible is the Virtual DOM in React. React has a virtual DOM, that is a lightweight in-memory representation of the actual DOM. When your component's state or props change, React calculates the minimal changes required in the virtual DOM, and then efficiently updates the real DOM to reflect those changes. This reduces the number of DOM operations needed, improving performance. We have talked about how the VDOM renders components. Two other important functions are reconciliation and establishing a uniform approach to event handling.
One of the benefits of the React declarative approach is that it allows developers to focus on building the UI (user interface) and abstracts away repetitive tasks like direct DOM manipulation. In addition, React provides a consistent way and efficient way of rendering UI.
Secondly, React avoiding direct DOM manipulation, helps to reduce the chance of introducing errors related to incorrect element manipulation. Also, React's virtual DOM optimization minimizes unnecessary DOM updates, leading to a smoother user experience.
So far, I have talked about why React was created and explained the basic concept of React along with its importance. Understanding that React at its core is a library and not a framework will be a good transition into one of the main shortcomings of React.
A library is a collection of reusable code focused on solving specific problems or adding particular functionality to an application. It offers flexibility and can be integrated into any part of a project without imposing a strict structure. A framework is a comprehensive, opinionated system that provides a structured and standardized way to build and manage an entire application. It dictates the architecture and offers built-in tools and features.
React is a library because it focuses on building user interfaces and allows developers to use it in their preferred way within their applications. On the other hand, Angular is a framework because it provides a complete solution with built-in tools and patterns for building the entire application. Everything needed to build a robust web application, including a powerful templating system, dependency injection, and integrated tools for routing, state management, and HTTP services has already been provided for developers. React allows developers to make a lot of choices and this is daunting for beginners who find it difficult to choose from multiple competing technologies offering similar solutions.
Another limitation of React is that it only has a one-way binding. There is top-down data flow in React i.e. from parent to child and not vice-versa. This is a problem because as applications grow larger and deeper component trees are formed, passing data through multiple levels of nested components (prop drilling) can become difficult to maintain. This is an area in React called State Management. Luckily for developers, React provides its solutions to this in the form of context API and, there are other external solutions to this such as Redux and Zustand.
In conclusion, React is an excellent choice for developers seeking a minimalist yet powerful solution for constructing and handling complex front-end applications. Its extensive ecosystem and widespread job opportunities further make it appealing in the development community.
Top comments (0)