150th edition of Typescript Daily. Thanks for the support!

Welcome to our 150th edition!

🔥 Top Stories

1. React 19 Beta is now available on npm.

2. INP replaces FID in Core Web Vitals metrics.

3. Google delays killing 3rd party cookies in Chrome. Again.

🌟 Spotlight

In this edition, let’s explore deep into the new changes, improvements, and benefits made in React’s 19th version.

What's New in React 19

React 19 introduces a variety of features designed to streamline development, improve performance, and enhance the developer experience. Here's a breakdown of the key additions:

1. Actions

• Concept: Actions provide a new way to manage data mutations and state updates in a more structured and manageable approach. They handle common functionalities like pending states, errors, optimistic updates, and sequential requests automatically.

• Code Example (Before Actions):

• Code Example (After Actions):

• Use Case: This approach simplifies form handling, especially for complex forms with multiple data mutations and optimistic UI updates.

Building on top of Actions, React 19 introduces useOptimistic to manage optimistic updates, and a new hook React.useActionState to handle common cases for Actions. In react-dom we’re adding <form> Actions to manage forms automatically and useFormStatus to support the common cases for Actions in forms.

In React 19, the above example can be simplified to:

2. New hook: useActionState

useActionState accepts a function (the “Action”), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, useActionState will return the last result of the Action as data, and the pending state of the Action as pending.

You can refer to the previous example for this one.

3. Other new hooks …

React 19 introduces several new hooks to work with Actions:

• useActionState: This hook is used to define an Action function and provides the current state of the Action, including any errors and whether the action is pending.

• useFormStatus: This hook allows design systems to access information about the parent form from within design components.

• useOptimistic: This hook allows you to display an optimistic UI state while the data mutation request is being processed.

4. New API: use

This one is really cool and useful. React 19 is introducing a new API (`use`) to read resources in render.

For example, you can read a promise with use, and React will Suspend until the promise resolves:

The use API can only be called in render, similar to hooks. Unlike hooks, use can be called conditionally.

5. React Server Components

Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the “server” in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.

• Info: Server Components allow pre-rendering components on the server before sending the HTML to the browser. This improves initial page load times and SEO.

• Use Case: Server Components are ideal for pages that require a lot of data to be fetched and rendered on the initial load, benefiting SEO and perceived performance.

6. Server Actions

Server Actions allow Client Components to call async functions executed on the server.

When a Server Action is defined with the "use server" directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. Read more about this here.

Improvements in React 19

• ref as a prop

• Diffs for hydration errors

• Context as a provider

• Cleanup functions for refs

• useDeferredValue initial value

• Support for Document Metadata

• Support for stylesheets

• Support for async scripts

• Support for preloading resources

• Compatibility with third-party scripts and extensions

• Better error reporting

• Support for Custom Elements

You can read in-depth about the improvements in the official blog post.

Looking to upgrade to React 19 Beta?

Great, here is how you can do it. Let me know in comments / reply directly how your upgrade turned out and also your experience using React 19.

📚 Popular Articles

🎮 Try this out yourself

Want to Launch with Confidence? (or Insider Tip: Validate Your Idea Before You Build )

Hey there,

Thanks for reading till here.

I'm working on something exciting that could be a game-changer for anyone with an idea! It's called MVPtester.com, and it's an idea validation tool designed to help you know if your concept has legs before you invest time and resources building it.

Imagine... ditching the guesswork and launching with confidence.

Here's the best part: I'd love for you to be among the first to try it out! It would take just a few minutes of your time, and your feedback would be invaluable.

Ready to become an MVP validation pro? Head over to MVPtester.com and let's see if your next big idea is a winner!

P.S. As a special thank you for your early support.

💬 What do you think about this?

Just hit reply and let us know your thoughts! Also, in case you are working on a cool idea or a project that you want to showcase, I can plugin it here for free. If you are interested, hit reply, and let’s talk.

📢 Calling for contributions

This newsletter thrives on community contributions. Your expertise, insights, and experiences matter to us! We're open to featuring articles written by our readers.

If you have a valuable perspective, a TypeScript tip, or a frontend engineering story to share, we welcome your submissions!

Just hit reply, and we will connect!

🌻 Your support matters! 🌻

Researching and writing high-quality articles demands considerable time and effort. As this newsletter is offered for free and managed alongside a full-time commitment, your support can help sustain its quality and growth.

If you enjoy the content and find it valuable, please consider supporting my efforts by visiting this link. Every contribution helps in maintaining and enhancing the newsletter's content and reach.

Thank you for being part of this journey!