What React beginners should know about React 19 first.

Table of Contents

1. At the beginning


2. 
   What's new in React 19?
   
   
   
   
   • React Compiler
   
   
   • Actions
   
   
   • New Hooks（useFormStatus, useFormState, useOptimistic, useTransition）
   
   
   • Server Components
   
   
   
   


3. Conclusion

At the beginning

The last time React released a version was on June 14, 2022, with the version number being 18.2.0.

Now, let's take an early look at the new features that might be officially released in version 19, based on the latest news from the React team.

What's new in React 19?

React Compiler

React can re-render more than necessary when state changes. Currently, this solution for these situation is used by manual memoization by using useMemo, useCallback. However, react compiler solve this issue. It will manage these re-renders and decide automatically how and when to change the state and update the UI. That's why such manual memoization will no longer be necessary in React 19.

Actions

<form action={search}>

  <input name='query' />

  <button type='submit'>Search</button>

</form>

Traditionally, Server Actions which are solutions for sending data from the client to the server were only available for server-side rendering in Next.js.

However, with Actions in React 19, a portion of that functionality is being extended to also work on the client-side. This means that Actions are become used in client-side code for single-page applications (SPA).

As per React’s official website, Action allows us to pass a function to DOM elements. Further, Actions work both synchronously and asynchronously. We can access the current status and response of form operations through the useFormStatus and useFormState hooks. In short, we'll be able to replace the onSubmit event with actions.

In addition to combining with useFormStatus and useFormState, actions can also be used with useOptimistic for managing optimistic state updates.

New Hooks

As I told you earlier, React 19 introduces new form-related hooks useFormStatus, useFormState and useOptimistic and useTransition. These new hooks provide functionalities related to managing form status, form state, optimistic state updates, and transitions in React applications.

useFormStatus

useFormStatus helps us have more control over the forms you create. It is useful when we want to know status information about the form submission（pending or not） and accordingly display the data.

useFormState

useFormState allows us to update state based on the result of the form submission.

useOptimistic

useOptimistic allows us to optimistically update the UI during asynchronous operations. It accepts the current state and an update function as parameters, return a copy of the state that may differ during the asynchronous operation.

useTransition

useTransition lets us update the state without blocking the UI. The useTransition hook is already available in React 18.2. What's new in React 19 is that you can now pass an async function to startTransition, which is awaited by React to start the transition.

Server Components

Until now, React components have primarily run on the client side. However, in React 19, server components which is already implemented in Next.js will be integrated directly into React. All the components in React by default are client side. Only when you use use server on the top of file becomes the component be a server component which runs on the server.

Conclusion

New React 19 features make us to build websites and web applications a lot easier and better. When is React 19 available? I'm not sure. But as of now, we can use it for our own learning, or having fun only. Avoid using them for customer facing apps at the moment. After React 19 released officially, it's better to use their features for creating websites and web application better and faster for sure.