Why Top Tech Companies Using React.js ?

How One Second Could Cost Amazon $1.6 Billion In Sales

“Amazon reported that a 100-millisecond delay in page load time could lead to a 1% loss in sales”

image from Google

Last week, the first article in my Frontend Interview Series got a lot of attention. Since many of my followers are frontend developers, I want to focus on interview preparation for a while to help them land jobs and grow their careers. Even though the state of the market is really bad, let’s do our part and keep moving forward.

React in Daily Life : Instagram, Netflix, Facebook …

Today’s topic may be technical, but in reality, we all interact with it in our daily lives.

From the screen and buttons on your phone to the apps you use daily — Facebook, Instagram, Amazon, Google Chrome, Skype, banking apps, shopping apps, and even many applications in the Apple Store and Google Play Store — are built with React. But why?

Because React is a dynamic and high-performance technology designed for an exceptional user experience. It’s widely adopted by top-tier companies due to its efficiency and scalability. In fact, performance is so critical that Amazon found that a 100-millisecond delay in page load time could cost them 1% in sales, and a one-second slowdown could result in a staggering loss of $1.6 billion annually.

So, let’s dive deep into React and understand why it’s such a game-changer in the tech industry!

image from Google

Question -1 : Can you explain what is the DOM ?

DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree-like model where each node corresponds to a part of the document (e.g., elements, attributes, text). The DOM allows programs (like JavaScript) to dynamically access, manipulate, and update the content, structure, and style of a web page.

• JavaScript can interact with the DOM to change content, styles, or structure on the fly.

Question -2 : Can you explain what is the Virtual DOM ?

Virtual DOM is a lightweight copy of the real DOM, used by libraries like React to improve performance. Instead of directly manipulating the real DOM (which is slow and resource-intensive), React works with the Virtual DOM to calculate the most efficient way to update the UI.

Question-3 : So How React’s Virtual DOM is working ?

• Initial Render:
  React creates a Virtual DOM representation of the UI.

• State/Props Change:
  When state or props change, React creates a new Virtual DOM tree.

• Diffing Algorithm:
  React compares the new Virtual DOM with the previous one (a process called “reconciliation”) to identify what has changed.

• Efficient Updates:
  Only the changed parts of the real DOM are updated, minimizing performance bottlenecks.

Question-4 : Why do you prefer using React over JavaScript in your Project ?

Efficiency: React’s Virtual DOM minimizes direct DOM manipulation, making updates faster and more efficient compared to Vanilla JavaScript, which directly interacts with the slower Real DOM.

Reusability: React’s component-based architecture allows you to reuse code across your application, reducing duplication and improving maintainability, whereas Vanilla JavaScript requires manual organization and often leads to repetitive code.

Scalability: React’s structured approach makes it easier to build and maintain large-scale applications, while Vanilla JavaScript can become messy and hard to manage as projects grow.

Developer Productivity: React’s JSX syntax and rich ecosystem (e.g., Redux, React Router) speed up development, whereas Vanilla JavaScript requires more verbose code and lacks built-in tools for advanced features.

image from Google

React is the most popular JavaScript library and using by top Companies.

Top Companies are Using React

image from Google

1. Facebook (Meta)

2. Instagram

3. Netflix

4. Airbnb

5. WhatsApp

6. Uber

7. Dropbox

8. Reddit

9. Twitter (X)

10. Pinterest

11. Atlassian

12. Discord

13. New York Times

14. Khan Academy

15. Shopify

16. Microsoft

17. Codecademy

18. BBC

19. Walmart

20. PayPal

Question -5 : Do you think React has some Disadvantages ?

While React is a powerful and widely-used library, it does have some disadvantages. Here are the key drawbacks of using React

• Steeper Learning Curve:
  React requires understanding concepts like JSX, components, and hooks, which can be challenging for beginners.

• Frequent Updates:
  React evolves quickly, forcing developers to constantly stay updated with new features and changes.

• SEO Challenges:
  Client-side rendering (CSR) can cause issues with search engine optimization, requiring tools like Next.js for server-side rendering.

• Boilerplate Code:
  Setting up a React project often involves additional configuration and boilerplate, which can slow down development.

• Not a Full Framework:
  React only handles the view layer, so you need to integrate other tools for routing, state management, etc.

Question -6 : You mentioned Client-side rendering (CSR). What is CSR actually ?

Ok. let me try to explain in a real example. Lets say you are shoppping online on Amazon.

image source form Wallmart Engineering Blog

• You Search for a Product
  You type “wireless headphones” in the search bar and hit enter. The page loads quickly, but the product list is empty at first.

• Your Browser Fetches Data
  Behind the scenes, your browser (client) uses JavaScript to fetch product details (like images, prices, and reviews) from Amazon’s servers.

• Products Appear Dynamically
  Within seconds, the product list fills in without reloading the page. You see all the wireless headphones with their details.

• You Filter the Results
  You click “Sort by Price: Low to High.” The page updates instantly, showing the products in the new order without reloading.

• You Add to Cart
  You click “Add to Cart” on a product. The cart icon updates immediately, showing the new item count without reloading the page.

In this example as you see “your browser (client) handles all the updates dynamically, making the shopping experience fast and seamless without full page reloads.”

Question-7 : Can we use React for server-side rendering (SSR) ?

React itself cannot perform SSR alone because it’s a client-side library. However, you can enable SSR by combining React with tools like ReactDOMServer or using frameworks like Next.js. Frameworks make SSR much easier and more efficient.

Question-8 : Can explain what is server-side rendering (SSR) ?

image from Google

Server-side rendering is a web development technique that involves rendering a web page on a server before sending the fully rendered HTML markup to the client.

Basically, SSR is a method where the server generates the HTML and CSS code for a web page and sends it to the client (the user’s browser) as a fully rendered page.

Sending a fully rendered page to the browser leads to faster page load times and helps search engines to effectively crawl and index the page, leading to improved SEO performance.

Question-9 : Last question What is benefits of server-side rendering (SSR) ?

With SSR, the client doesn’t need to wait for JavaScript or CSS Files to load. Instead, the web page is fully rendered and filled with the necessary content. This leads to a better user experience because web visitors won’t encounter a blank screen while waiting for the required code to load. Instead, they see the website content faster.

Advantages of SSR

• Improved SEO:
  Search engines can easily index pre-rendered HTML, improving search rankings.

• Fast Loading Times:
  Users see the content immediately, even on slow networks or devices.

• Better User Experience:
  Eliminates loading screens and provides a fully rendered page right away.

• Enhanced Security:
  Sensitive data and logic stay on the server, reducing exposure to client-side attacks.

Disadvantages of SSR

• Development Complexity:
  Requires setting up a server and managing server-side logic.

• More Development Cost:
  More time and resources are needed to implement and maintain SSR.

• Delayed Interactivity:
  The page becomes fully interactive only after JavaScript “hydration” completes.

• Waiting Server Load:
  SSR consumes more computational resources, increasing the load on servers.

Conclusion

React is a powerful library which has revolutionized modern web development. Its component-based architecture, Virtual DOM, and rich ecosystem make it a top choice for building dynamic, interactive, and scalable applications. Whether you’re building a small project or a large-scale application, React provides the tools and flexibility to create exceptional user experiences.

Keep going, and success will come.

Good luck!

This article was originally published on Medium.

Let’s Connect : Substack | LinkedIn