What React beginners should know about React 19 first.
Tags: javascript, react, webdev, beginners
Published: 2024-04-21 00:19:12

## 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
```React
<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.