New React 19 Hooks (With Examples)

Source: Dev.to

use()

The use() hook offers a concise way to handle asynchronous data directly inside components. It works with Suspense, allowing you to pause rendering until a promise resolves.

Use case

Fetching data and displaying it without additional async handling.

Example: Fetching a user profile

import React, { use } from 'react';

async function fetchUserProfile(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

function UserProfile({ userId }) {
  const user = use(fetchUserProfile(userId)); // Directly use the async function

  return (
    
      
## {user.name}
      
{user.bio}
    
  );
}

export default function App() {
  return (
    Loading...}>
      
    
  );
}

use() lets you retrieve data inside the component without explicit async/await or .then() calls. Wrapping the component in Suspense provides a loading state while the data is being fetched.

useOptimistic()

useOptimistic simplifies optimistic UI updates—updating the UI immediately while the server processes the change in the background.

Use case

A “Like” button that reflects the new state instantly, even before the server confirms the action.

Example: Optimistic “Like” button

import React, { useOptimistic } from 'react';
import { api } from './api'; // assume an API helper exists

function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useOptimistic(false);

  const handleLike = async () => {
    setIsLiked(true);               // Optimistic update
    await api.likePost(postId);     // Server call runs in the background
  };

  return (
    
      {isLiked ? 'Liked' : 'Like'}
    
  );
}

The button updates instantly, while useOptimistic keeps the optimistic state in sync with the eventual server response.

useFormStatus()

useFormStatus provides real‑time information about a form’s submission and validation state, making it easy to show loading indicators or disable controls.

Use case

Display a loading message and disable the submit button while a form is being submitted.

Example: Form with loading indicator

import React, { useFormStatus } from 'react';

function MyForm() {
  const { isSubmitting, isValid } = useFormStatus();

  return (
    
      
        Name:
        
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

isSubmitting and isValid let you give immediate feedback and prevent duplicate submissions.

useFormState()

useFormState automates the handling of form values, removing the need for manual state management for each field.

Use case

Manage state for multiple inputs in a contact form without boilerplate.

Example: Managing form values

import React, { useFormState } from 'react';

function ContactForm() {
  const { values, handleChange } = useFormState({
    name: '',
    email: '',
  });

  return (
    
      
        Name:
        
      
      
        Email:
        
      
      Submit
    
  );
}

useFormState keeps values in sync with user input, and handleChange updates the state automatically.

Conclusion

React 19’s new hooks—use, useOptimistic, useFormStatus, and useFormState—streamline common development patterns:

• Data fetching with use integrates seamlessly with Suspense.
• Optimistic UI updates become trivial using useOptimistic.
• Form handling is more declarative and less error‑prone with useFormStatus and useFormState.

These additions reduce boilerplate, improve performance, and enable developers to build smoother, more responsive user experiences.