useTransition

Allows to mark a state update as a non-blocking transition. React will prioritize urgent updates (like typing or clicking) and let background renders yield to user input.

import { useState, useTransition } from 'react';

export const MyComponent = () => {
    const [tab, setTab] = useState('tab 1');
    const [isPending, startTransition] = useTransition();

    const nextTab = () => {
        // Marks state update as low-priority
        startTransition(() => {
            setTab('tab 2');
        });
    };

    return (
        <>
            <button onClick={nextTab}>Next Tab</button>
            {isPending && <span>Loading...</span>}
        </>
    );
};