Million 3.0: All You Need To Know
Tags: react, javascript, hiring
Published: 2024-02-05 01:40:40

## Introduction

To be honest, it fills me with great joy to finally be able to witness the launch of the 3.0.0 major release of [Million.js](https://million.dev); this is something that has been talked about since maybe July 2023, but, [Aiden Bai](https://twitter.com/aidenybai) finally assembled a team to get it out there and just last week on the day **2 February** as at **8:00 am PST (Pacific Standard Time)** Million v3 was released!!

{% twitter 1753456530652107072 %}


Not to ruin the pace we're going with here, I just have to introduce myself. Hi, I'm Tobiloba and I'm the **Community Engineer** at Million.js, a role I volunteered for last year in January (2023).

## What is Million

If you had asked me last year what Million was, I would say:

> Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% Faster.

However, following the v3 release; I can however now tell you that:

> Million is an optimizing compiler for React that does it's work automatically

As simple as that! Although, we've always had the compiler, I think the hint to catch here is that Million works **automatically** to help with the necessary optimizations it offers. If you need a deep dive on how Million works, let me know in the comments and I can explain it or refer you to resources.

To get Million installed in your React / Next / Astro / Vite / Remix / Gatsby project, just do:

```
npx million@latest
```

The way I would go through this will be in sort of an unconventional way as I only want to focus on the necessary information

### Hydration And Performance Fixes

**Challenge:** Making large React apps with server-side rendering (SSR) interactive was slow in Million 2 due to hydration complexity (attaching event listeners).

```jsx
// Normally, React SSR will traverse every node in the component (👎 ❌)
<div>
  <h1>Hello, world!</h1>
  <button onClick={handleClick}>{count}</button>
</div>
```

**Solution:** Million 3 introduces a smarter hydration system that only interacts with dynamic parts, improving performance from `O(n)` to `O(d)` (d being dynamic nodes).

```jsx
// Million 3 only hydrates `handleClick` and `count` (✨ ✅)
<div>
  <h1>Hello, world!</h1>
  <button onClick={handleClick}>{count}</button>
</div>
```

**Benefit:** Faster initial page load and smoother interactions, especially in complex apps.

Additionally, Removing `<slot>` elements in the next release will further reduce overhead and style issues.


### Compiler Stability

Stability is key, and that's why we've completely rewritten the compiler in Million 3. This rebuild focuses on making your experience more solid and dependable by covering a wider range of scenarios. You'll benefit from:

- Enhanced TypeScript support for smoother integration.
- Multiple return statements handled flawlessly.
- Conditional logic working as expected, every time.
- Nested React components managed seamlessly.

We're not stopping there! In upcoming minor releases, we'll be turbocharging the compiler's performance, making Million v3 even faster.

### Million Wrapped

I haven't been able to deep dive into it's inner workings yet, but, let's just say it was cooked with [Remotion](https://www.remotion.dev/) and as opposed to us just having you only have to show us how your faster your app is with this in your terminal:

![Terminal automatic mode feedback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97gusyvfzzpfxysecqgd.png)

We now have **MILLION WRAPPED!** and it looks like and feels like this (note that the image below was taken from a [test](https://million.dev/wrapped/59caeeb856042e281827f1e883dc5b4a?name=My+React+app) and it is merely to show you how **Million Wrapped** works).

![Million wrapped yay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6re4ulhp0n7y2z4wndt.png)

### Internationalization 

I remember working on this and it took me like a week to properly setup! My initial plan with this was to get the website and docs translated to:

- Chinese
- French
- Spanish

However, this may just be due to the lack of proper documentation from the Nextra side of things (shoutout to [Nextra](https://nextra.site/) though, regardless). 

Before the new release, we were able to score a few points like getting the entire docs translated to Spanish, a lot of other pages,and a few blogs translated to French as well. 

There has been none on Chinese though, but, we're actively looking for help and we have opened a few issues for people to help with [here](https://github.com/aidenybai/million/issues).
Thank you in advance.

![Lanhuage toggler for i18n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j16lz3rhbnp4n1zgh9b.png)
 

### Million Lint

I cannot say much about this, because I don't know much, but, just know that it is certain that with the Million linter in your React applications, you will not be writing any less-performant React code again!

I'm really looking forward to the public release of this linter.


###  Million Is Hiring

We are looking for talented frontend (dev tools) and pl/ml engineers to join us in the Bay Area. If you are interested, please email aiden@million.dev with your resume and something you built using Million.


### Extra Gist

If you have been following the build-up up until the release day last week, you will know that we had a launch party and a LOT of cool people turned up! 

I really enjoyed being part of the organizers of this awesome event and reaching out to speakers was super fun!

You can watch the entire event on [Corbin Crutchley's Twitch](https://www.twitch.tv/videos/2050937085)

![Screenshot of attendees at the Million v3 launch party](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf01g3e9g9zi5icwb42v.png)

Thank you very much for reading up until this point! I appreciate you! Honestly, I am both scared and excited as to what the future holds for Million, but, we are hyper-focused on helping users build performant software be it frontend or backend

We are still celebrating the launch and we would like you to give us [your experience using Million in your applications](https://github.com/aidenybai/million/discussions/943). 

⭐️⭐️ Feel free to join our [Discord](https://www.twitch.tv/videos/2050937085) to ask questions or share feedback and please give us a star on [Github](https://github.com/aidenybai/million)!

## Resources

- [Aiden Bai's post on X](https://x.com/aidenybai/status/1753456530652107072?s=20)
- [Announcing Million 3](https://million.dev/blog/million-3)
- [Million on X](https://twitter.com/milliondotjs)
- [Release Notes](https://github.com/aidenybai/million/releases/tag/v3.0.0)