Every React 19 Feature Explained in 8 Minutes

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