Every React 19 Feature Explained in 8 Minutes

Summary

React 19 introduces a game-changing update with the React compiler, which optimizes code and reduces the need for manual performance tools like memoization. It simplifies passing refs to child components, and the new 'use' hook replaces 'useEffect' and 'useContext' for cleaner data fetching and context consumption. Directives, actions, and form-related hooks enhance client and server interactions, while 'useOptimistic' provides real-time app improvements. This update streamlines React development, making it faster and more efficient.

Takeaways

• 🚀 React 19 introduces significant updates that focus on reducing the amount of code developers need to write and improving app performance.
• 🛠️ The React compiler is a core feature of React 19, converting React code into regular JavaScript to enhance performance without manual intervention.
• 🔧 React 19 removes the need for performance hooks like `useCallback`, `useMemo`, and `React.memo` due to the compiler's automatic optimizations.
• 🔄 The `forwardRef` function is no longer necessary; refs can now be passed directly as props and accessed similarly to other props.
• 🔌 The new `use` hook can asynchronously load resources, effectively replacing `useEffect` for data fetching and `useContext` for context data.
• 📄 Directives are a simple addition to React, allowing developers to specify where components should run, either on the client with `use client` or server with `use server`.
• 📝 Actions in React 19 simplify form handling, executing functions on form submission that can now run on either the server or client.
• 🔒 The `useFormStatus` hook helps manage form submissions by providing information on the submission status, useful for disabling submit buttons during processing.
• 🔄 The `useFormState` hook is a stateful action that uses action functions to set new state values, enhancing form interaction and state management.
• 🛒 For e-commerce applications, `useFormState` can be used to implement features like add-to-cart buttons, providing immediate feedback to the user.
• 🌐 The `useOptimistic` hook allows for optimistic updates, improving user experience by immediately reflecting user actions in the UI before server confirmation.

Q & A

What is the main focus of React 19 update?

React 19 focuses on reducing the amount of code developers need to write, with the introduction of a compiler that optimizes React code automatically, thus removing the need for manual performance hooks.

What does the React compiler do in version 19?

The React compiler converts React code into regular JavaScript, improving overall app performance and reducing the need for manual performance considerations.

Why are manual memoization tools like useCallback, useMemo, and memo no longer necessary in React 19?

The new compiler in React 19 optimizes code automatically, which means developers can remove these performance hooks as the compiler handles the optimization.

What change has been made regarding the use of the forwardRef function in React 19?

In React 19, the need for the forwardRef function has been eliminated, allowing developers to pass refs as props and use them directly without additional functions.

What is the new 'use' hook introduced in React 19 and how does it work?

The new 'use' hook in React 19 is a multi-purpose hook that can load different resources asynchronously, effectively replacing 'useEffect' for data fetching and 'useContext' for reading context data.

How does the 'use' hook simplify fetching data from an API compared to 'useEffect'?

With the 'use' hook, developers can resolve promises directly, show a fallback UI with React Suspense during data fetching, and display the fetched data in the UI once the promise is resolved, making the process cleaner and easier than with 'useEffect'.

What are directives in React and how do they differ from previous versions?

Directives are strings added to the top of component files that tell React where to run a component, either on the client with 'use client' or on the server with 'use server'. This is a new feature in React 19 that simplifies component placement.

What is the purpose of the 'actions' feature in React 19 for forms?

The 'actions' feature in React 19 simplifies form handling by allowing functions to be called when a form is submitted. These functions can now be executed on the server or client, improving form interactivity.

How does the 'useFormStatus' hook help with form submissions in React 19?

The 'useFormStatus' hook provides information about the status of a form submission, such as when it is pending. This helps in managing UI elements like disabling the submit button during submission to prevent multiple submissions.

What is the 'useFormState' hook in React 19 and how does it differ from 'useState'?

The 'useFormState' hook is similar to 'useState' but uses an action function to set the new state. It is designed to work with form submissions, allowing developers to access both the previous state and the submitted form data within the action function.

How does the 'useOptimistic' hook improve user experience in real-time applications?

The 'useOptimistic' hook performs an optimistic update, immediately reflecting user actions in the UI before the server confirms the action. This provides a faster response to user inputs, improving the perceived performance of real-time applications.

Outlines

00:00

🚀 React 19: Streamlined Coding and Performance Improvements

React 19 introduces significant updates that streamline the development process by reducing the amount of code developers need to write. The new React compiler automatically optimizes code, eliminating the need for manual memoization tools like `useCallback`, `useMemo`, and `React.memo`. This update not only enhances app performance but also simplifies the coding experience. Additionally, React 19 removes the necessity of using the `forwardRef` function, allowing refs to be passed directly as props. The introduction of the `use` hook for asynchronous resource loading and the `useClient`/`useServer` directives for specifying component execution environments are also highlighted. The paragraph also touches on the new form handling features, including actions and the `useFormStatus` hook, which facilitate server-client form interactions.

05:01

🛍️ Advanced Form Handling and Optimistic Updates in React 19

This paragraph delves into advanced form handling capabilities in React 19, introducing the `useFormState` hook, which is akin to `useState` but integrates with action functions to manage state transitions based on form submissions. It outlines practical use cases, such as implementing an add-to-cart feature in an e-commerce application, where the product ID from a form submission is used to determine cart availability. The paragraph also discusses the `useOptimisticUpdate` hook, which is ideal for real-time applications like chat apps. It allows for immediate UI updates based on user input, followed by synchronization with server state once the data is confirmed. The summary emphasizes the improved user experience by reducing wait times and providing instant feedback, leveraging the optimistic approach to UI updates.

Keywords

💡React 19

React 19 refers to the major update of the React JavaScript library, which is a key focus of the video. This version is significant because it simplifies the code developers need to write by introducing a compiler and other features that improve performance and reduce the need for manual optimizations. The script mentions React 19's compiler as a central feature that automates code optimization, allowing developers to remove performance hooks like 'useCallback', 'useMemo', and 'memo'.

💡React Compiler

The React Compiler is a new feature in React 19 that converts React code into regular JavaScript. Its main benefit is to enhance overall app performance without requiring developers to focus as much on manual performance optimizations. The compiler is highlighted in the script as the reason behind the ability to eliminate certain performance-related code, thereby streamlining the development process.

💡Manual Memoization

Manual memoization is a technique used in React to prevent unnecessary re-renders of components by memorizing expensive calculations or values that shouldn't change between renders. The script mentions 'useCallback', 'useMemo', and 'memo' as examples of manual memoization tools that were previously necessary but are now optimized automatically by the React Compiler in React 19.

💡Forward Ref

Forward Ref is a React feature that allows passing a ref to a child component. In earlier versions of React, developers had to use the 'forwardRef' function to achieve this. The script explains that in React 19, the need for 'forwardRef' is removed, simplifying the process of passing refs as props to child components.

💡use hook

The 'use' hook in React 19 is a versatile feature that can load different resources asynchronously, such as resolving promises or context. It is introduced in the script as a multi-purpose hook that can replace 'useEffect' for data fetching and 'useContext' for reading context data, thereby reducing the amount of code needed for these tasks.

💡React Suspense

React Suspense is a component used for managing data fetching in React applications. It is mentioned in the script in the context of using the 'use' hook for fetching data, where Suspense is used to show a fallback UI while the data is being fetched and then displays the fetched data once the promise is resolved.

💡Directives

Directives in React are strings that can be added to the top of component files to specify where a React component should run, either on the client with 'use client' or on the server with 'use server'. The script explains that directives are a simple yet significant change in React, likely inspired by their use in Next.js.

💡Actions

Actions in React 19 are functions that are executed when a form is submitted and are connected to the 'action' prop of any form element. The script describes how actions can simplify form handling by allowing them to be executed on either the server or the client, providing a more streamlined approach to form submissions.

💡useFormStatus

The 'useFormStatus' hook from React DOM is used to manage form submissions, particularly to prevent form resubmission before the previous submission finishes. The script illustrates its use by showing how it provides information about the submission status, which can be used to disable the submit button during a form submission process.

💡useFormState

The 'useFormState' hook is a stateful action hook introduced in React 19 for managing form state. It is similar to the 'useState' hook but uses an action function to set the new state. The script provides an example of using 'useFormState' for an add-to-cart button in an e-commerce app, demonstrating how it can handle form submissions and update state based on the action's result.

💡useOptimistic

The 'useOptimistic' hook is used for performing optimistic updates in React applications, which is ideal for real-time apps like chat apps. The script describes how it allows developers to immediately update the user interface with the user's input and then reconcile it with the server state once the server confirms the update, providing a smoother user experience.

Highlights

React 19 introduces a major update that reduces the amount of code developers need to write.

React 19 is not yet a stable release, but the canary version can be installed for early access to new features.

The React compiler is a key feature of React 19, converting React code into regular JavaScript to improve app performance.

Manual memoization tools like useCallback, useMemo, and memo are no longer necessary due to the compiler's optimizations.

The forwardRef function is no longer required in React 19, simplifying the passing of refs to child components.

The new use hook in React 19 can load various resources asynchronously, replacing useEffect and useContext.

The use hook simplifies data fetching and context data reading, making the code cleaner and easier to read.

Directives are a new feature in React 19, allowing components to specify client or server execution.

Actions in React 19 are functions executed on form submission, which can now run on the server or client.

The useFormStatus hook provides information about form submission status, useful for disabling submit buttons.

The useFormState hook is introduced for stateful form actions, making it easier to update state based on form submissions.

The useOptimistic hook allows for optimistic updates, improving user experience in real-time applications.

React 19's optimistic updates can be used in chat apps to immediately show user input before server confirmation.

A complete guide and cheat sheet for React 19 is available for free at React Boot Camp.

React 19 aims to make building React projects faster and more efficient with its new features and compiler.

Transcripts

react has got a major update in version

19 but before you get alarmed about how

much time it'll take to learn a new

version of react I want to give you some

good news react 19 is less about the

code you have to write and more about

the code you don't have to write anymore

let's take a look at what react code

you'll be able to remove in react 19

plus some new features it offers to help

you build your react projects faster as

of today react 19 is not yet a stable

release so if your react version is less

than 19 you can install the canary

version of react to start using these

features today the biggest part of this

new version is the react compiler most

of the features that are in react 19 are

due to the compiler so what does it do

the react compiler will convert your

react code into regular JavaScript the

main benefit of this is to improve your

overall app performance but what's even

better is that it removes the need for

you to think as much about performance

that means you know longer have to use

manual memoization tools like use

callback use memo and memo these tools

were necessary to prevent unnecessary

renders but they are hard to use

properly even with react reminding you

to use them in the console in this code

for example use callback prevents the

increment function from being recreated

on each render and use memo is used to

recompute the double count value only

when count changes but now the new

compiler optimizes your re react code

automatically so you can completely

remove any performance hooks you

previously had and it gets even better

in react 19 you also no longer need to

use the forward ref function up until

now if you wanted to pass a ref to a

child component you would first create a

ref then pass that ref as a prop to your

child component but to access it you had

to use forward ref now without forward

ref take a look at the difference we can

pass ref as a promp and use it just like

we would any other prop which is a

really nice Improvement but there's even

more react code to remove you can do

that with the new use hook which lets us

load a number of different resources

asynchronously use can resolve promises

or context it's a multi-purpose hook

which means it can effectively replace

two major hooks it can replace use

effect for things like data fetching and

it can replace use context for reading

context data in the past if you wanted

to fetch data from an API with use

effect you've first needed to make the

API request inside use effect then put

that return data somewhere usually in a

state variable with used State and

finally display that updated state in

the UI after handling loading and error

cases fetching data with the use hook on

the other hand involves resolving the

fetch function which returns a promise

while fetching data you use the react

suspense component to show a fallback UI

and once the promise is resolved we can

show the fetch data in the UI

and all this is a lot cleaner and easier

to read than with use effect to read

data from react context before react 19

you used the Ed context hook like in

this example where we're displaying the

user's name you first create your

context then wrap the context provider

around the components that will use the

context data and then read that data

with used context by giving it the

context object but now use can consume

context for us as well just replace use

context with use and you're done

directives are another big but simple

change to react if you've used nextjs

lately you've probably already seen them

directives are just strings which we can

add to the top of component files

directives let us tell react where we

want to run a react component on the

client with use client or on the server

with use server Now actions are a great

new feature that make working with forms

a lot easier actions are just functions

that are called when a form is submitted

these functions are connected to the

action prop of any form element and with

react 19 actions can now be executed on

the server or client here's a simple

client action example where we're

alerting the user what they typed into

an input for this example you first

write use client at the top of your file

to make sure it runs on the client then

connect the form action function to the

action prop of the form and if you name

the input you can access the input's

value by writing form data get name

however if your action is asynchronous

you won't know exactly when your form

submission will finish to prevent the

form from being submitted again before

it finishes you can use the use form

status Hook from react Dom it'll give

you information about when the

submission is pending and this is

helpful for doing things like disabling

the submit button during a form

submission here's how it works you'll

first create a nested component inside

your form inside that component you'll

call use form status to get the pending

property and finally pass the pending

property to the disabled prop but what

if you want the data returned from an

action function for that you can use a

new stateful action hook called use form

State it's pretty similar to the use

State hook except it uses an action

function to set the new state to make a

simple counter using a form you first

give use form State an action function

to call and an initial State value when

the action is called you can access both

the previous state value and the form

data that was submitted finally to set

State you return the new state from the

action and use it in your component a

more advanced use case for use form

state is an add to cart button for an

e-commerce app to set this up you pass

an add to cart action to use form State

the product ID is on a hidden input

which is passed to form data when the

form is submitted

within the add to cart function you use

that ID to check if the product can be

added to the cart and finally return a

message to the user telling them whether

the operation was successful or not but

making the user wait for the result of

an action isn't a great experience for

them so what can you do to fix it this

is a great use case for the new use

optimistic hook which performs an

optimistic update it's ideal for

realtime apps such as a chat app to

immediately update the user interface

with what the user sub Ed if a user

submits a message you could perform an

optimistic update and tell the user the

message is being sent and afterwards

update it with the server State when it

is actually added to the database to add

this functionality you would first

create a separate piece of State for

your messages and then pass that state

to the use optimistic hook within the

action you then perform an optimistic

update and this is a temporary update to

add the new message to State while

you're waiting on the server's response

and when it comes back you can replace

the temporary client state with your

actual server State and that is react 19

in a nutshell now if you want to lock in

everything in react 19 I've made a

complete guide that covers everything

you need to know with a complete cheat

sheet of all the concepts all the code

in this video plus live examples for you

to use right now you can grab all that

for free at react boot camp. I hope you

learned a lot in this video and I'll see

you in the next

one