React 19 is the most significant release since React 16 introduced Hooks. If you haven't had time to dig through the release notes, this article covers the features that will change how you write React code day to day.

Actions — The End of Manual Loading States

Before React 19, handling async operations meant manually managing isLoading, error, and calling setData. Actions make this automatic.


function UpdateProfile() {
  const [error, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const error = await updateProfile(formData);
      if (error) return error;
      redirect("/profile");
    },
    null
  );

  return (
    

      
      
      {error && {error}}
    
  );
}

isPending is automatically true while the async function runs. No more manual state.

The use() Hook

use() is a new hook that reads the value of a Resource — a Promise or Context. Unlike useContext, it can be called conditionally.


const user = use(fetchUser(id)); // suspends until resolved

This works with Suspense boundaries for clean loading states.

ref as a Prop

Function components can now accept ref as a regular prop — no more forwardRef boilerplate.


function Input({ ref, ...props }) {
  return ;
}

Document Metadata

You can now render </code>, <code class="inline-code"><meta></code>, and <code class="inline-code"><link></code> tags directly inside your components and React will hoist them to <code class="inline-code"><head></code> automatically. </p><p> <pre><code class="language-jsx"> function ProductPage({ product }) { return ( <> <title>{product.name}

`{product.name}`


    
  );
}

Conclusion

React 19 removes a lot of the ceremony that made React feel verbose. Actions in particular are a genuine improvement to the developer experience for async workflows.

Start using these features today — our React courses have been updated to cover all of them.