Video wird geladen...
Video konnte nicht geladen werden
Last, but not least... Announcing React Email 3.0. 1. Brand new component library 2. 11x performance improvement 3. Support for React 19 RC 4. Deprecation of renderAsync 5. Supabase Email Hook
73,438 Aufrufe • vor 1 Jahr •via X (Twitter)
16 Kommentare

First of all, I just wanted to say thank you. React Email now has 270,627 weekly downloads on npm, that is a 136% increase since the last major released 7 months ago. We also have 13,503 stars on GitHub and would like to thank all the 132 contributors who made this possible.

1. Brand new component library As developers, we are big fans of projects like @tailwindui and @shadcn UI. We want to provide that same experience, so we made 54 components for you to create beautiful emails.

When you go to you will see all the available categories, including e-commerce, marketing, and more.

Once you find a component you like, you can see the preview on desktop and mobile.

When you inspect the code, you will see two options: Inline CSS or Tailwind CSS. Pick your preferred option, and copy the code directly into your project.

2. 11x performance improvement Great developer experiences mean fast startup times. That's true for any framework, library, or tool. That's why we decided to focus on improving the performance of React Email 3.0 even more.

We ran a performance benchmark for the old version of React Email (2.1.6) against the new one (3.0.0), and the results were massive. P99 (99th percentile) • Old version: 11331ms • New version: 975ms

The tests evaluated the startup time, plus the time to render the first email preview, and were executed on a Linux machine with 3.7 GHz 12-core AMD Ryzen 9 5900x CPU, 16 GB 3600 MHz DDR4 memory. See benchmark details:

3. Support for React 19 RC Even though React 19 is still a Release Candidate, we have made some changes to ensure compatibility in the future. To make that happen, we had to implement a few internal changes so that the render function works 100% with React 19.

4. Deprecation of renderAsync The new version of React will deprecate `renderToStaticMarkup`, which would break our old `render` function. That is why we decided to deprecate our old `renderAsync` in favor of a new `render` function, which will be async by default.

If you are using `renderAsync` now, you need to replace it with the new `render`. If you are using the old render, you have to treat the new Promise that it returns. This is going to pave the way for future headache-free upgrades for all users.

5. Supabase Email Hook @supabase users have been asking for a better way to customize their authentication emails. Before, you had to create a React Email template, then export the HTML result, and copy it to the Supabase UI. Needless to say, this was hard to maintain.

Now, Supabase released a new feature called Email Hooks that allows you to use a custom email provider to send emails directly from edge functions. This enables you to use React Email templates directly in Supabase:

This enables you to use React Email templates directly in Supabase: Read the docs: Find the code: @thorwebdev from Supabase recorded a video showing how it works:

Shoutout to @gabrielmfern, @luxonauta, and @leandrodragani. Without you, this release wouldn't exist.

Thank you all for following this launch week! We still have a surprise left for tomorrow, so don't forget to check it out 🤫
