useOptimistic

Allows you to optimistically update the UI while an async action is in progress. It immediately displays a temporary expected state to the user and automatically reverts if the operation fails or completes.

import { useState, useOptimistic } from 'react';

export const MyComponent = () => {
    const [messages, setMessages] = useState([]);

    // Intermediate state updated before server responds
    const [optimisticMessages, addOptimisticMessage] = useOptimistic(
        messages,
        (state, newMessage) => [
            ...state,
            { message: newMessage, sending: true }
        ]
    );

    const action = async (formData) => {
        const message = formData.get('message');
        addOptimisticMessage(message); // Immediately update UI
        await save(message); // Perform actual server request
        setMessages(prev => [...prev, message]);
    };

    return (
        <form action={action}>
            <Messages messages={optimisticMessages} />
            <input name="message" />
            <button type="submit">Send</button>
        </form>
    );
};