Microsoft is ditching React
Tags: webdev, javascript, programming, news
Published: 2024-06-12 08:24:40

Recently, the Microsoft Edge Team wrote an article on how Microsoft is improving Edge to become faster. However, Microsoft took shots at React and announced they are not going to use it for Edge anymore.

After their article, developers questioned whether React is worth learning anymore.

I will explain their entire article and how it affects React, JavaScript Developers, and what are the true intentions of the Microsoft Edge Team.

## History

_Microsoft Edge is built using Chromium_, an Open-Source web browser project by Google. The default UI of Microsoft Edge is derived from Chromium.

Microsoft doesn't want Edge to look like Chrome (obviously). Therefore, Edge has UI components and elements designed by Microsoft. However, these components are made using React.

Many small components throughout Edge are created using React which collectively builds the entire browser.

The entire Edge browser isn't a React application. It combines multiple components in the form of HTML pages with React in them. The menu, dropdown, and the favourites tab are mini React apps.

That's not efficient, right? Especially for UI data that never changes dynamically. **Its inefficiency has caused Microsoft to doubt React**.

_But this story is half-baked_. We'll soon unveil whether React was at fault or Microsoft had a manufactured flaw.

---

> Prepping for an interview? Leetcode is key. I built a Notion Dashboard to help you ace those DSA rounds. Store solutions, track progress, log problems — all in one place for $10.

> Plus, get bonus resources for TypeScript, Python, and JavaScript, free lifetime access to a $4.99 exclusive community, and 25% off upcoming products. Grab it now and ace your prep!

{% embed https://store.afankhan.com/l/codenexus %}

---

## The Problems

Microsoft claims that React isn’t efficient, so they made improvements and announced it in an article published on _May 28th, 2024_.

{% embed https://youtu.be/avJmgfGpoJA %}

Microsoft observed that the bundles of code shared between multiple components were too large and that caused the browser to slow down.

They weren’t supposed to share a bundle with different components, but as they claim it is a problem, here are their reasons:

1. There was a modularity issue with the UI code. **The teams working on different components shared common bundles, files, etc**. It resulted in one part of the UI slowing down another part by sharing things that weren’t necessary.

2. **_Microsoft used a framework that relied on JavaScript to render the UI using the client-side rendering technique_**. Microsoft claims this is the second reason to slow their browser down.

As I explained earlier, Edge shared multiple React applications.

They didn’t initiate multiple React projects but used a single JavaScript Bundle in various places and mounted the Bundle to multiple props in many components.

> A JavaScript Bundle is an optimization technique that combines multiple JavaScript files into a single line to reduce and process the server requests efficiently.

And the second reason is why I am writing this article. Indirectly, Microsoft addressed React as the framework that caused the bundle problem for them.

![WIndows + MacOS Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w08s3e7d9tgm0xa3tea.png)

Microsoft addressed React indirectly because they are working on React-based projects, like React Native for Windows, MacOS, and Xbox. However, they still loathe it for Edge.

**Even though Microsoft is building React Native, they still don’t use it for Edge**. Edge is a native desktop application and React Native would be an ideal solution, but Microsoft begs to differ.

It is because using HTML, CSS, and JavaScript, or React for menus, dropdowns, etc., is a common pattern or technique, or it was in the olden days. There’s a reason why they are switching, right?

![Wii Settings Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew01yhzkd8mrp56kpemb.png)

In the ancient days, Menus and their options were individual HTML files. Every button or link to perform a specific action would redirect to an HTML file.

However, that old pattern was only used for components like a Menu. But Microsoft clearly didn’t understand that.

They used an HTML file with React for every simple component. Every HTML file required JavaScript. And they shared this JavaScript code with every team as bundles of code.

Microsoft embedded multiple HTML pages (in React apps) into their browser to control their entire UI. And now, they are looking for a solution to both problems.

---

> If you’re gearing up for an interview, I’ve got you covered. I’ve put together a killer list of must-know 102 JavaScript topics, 200+ JavaScript Interview questions, and 102 resources to learn them in a Notion Template. Grab it for just $5. Don’t miss out.

{% embed https://store.afankhan.com/l/200-JS-Questions-Concepts-Resources %}

---

## The Solution

**For starters, React wasn’t the problem**. Microsoft implemented it incorrectly.

![Youtube Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6srynnm925c72tbtwl8.png)

A bundle should work for a specific webpage and serve its purpose independently. Each page could have an individual bundle or collection.

However, when you share the same bundle or files across the work of different teams, you must expect chaos. Every team accesses and modifies the same bundles.

The outcome was expected. React wasn’t meant for what they were doing with it. React isn’t slow. But you cannot expect it to be blazing fast when you create dozens of instances.

Microsoft came up with a solution to a problem they created. They created a custom framework.

![Microsoft Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9rkjkug9ibcsdfb4u0k.png)

Microsoft announced WebUI 2.0 (not Web 2.0). A markup-first architecture. It solves the problem of large code bundles by minimizing their size and the amount of JavaScript that runs during the initialization path.

Microsoft has started using this new architecture to solve both problems I stated earlier. They used React for the wrong purpose, forgot that React Native exists, and solved a manufactured problem.

First, they used individual HTML files for each component with React inside them. Then, they offloaded the JavaScript code required by each HTML file into one bundle shared by ten other teams.

And now, they don’t use React anymore. What do you think about this?

---

If you want to contribute, comment with your opinion and if I should change anything. I am also available via E-mail at director@afankhan.com (Afan Khan LLC). Otherwise, Twitter (X) is the easiest way to reach out — [@whyafan](https://x.com/whyafan).