useOptimistic

Définition

Hook stable depuis React 19 (5 décembre 2024) qui affiche un état optimiste pendant qu'une Action est en cours. Si l'Action échoue, React revient automatiquement à la valeur réelle ; si elle réussit, état optimiste et état réel convergent dans le même rendu, sans rendu supplémentaire.

Analogie

Comme cocher 'lu' sur un message avant que le serveur confirme : si ca échoué, la coche disparaît.

Exemple de code

const [optimisticLikes, addOptimistic] = useOptimistic(
  likes,
  (state, newLike) => [...state, newLike]
);

function handleLike() {
  startTransition(async () => {       // obligatoire : dans une Action
    addOptimistic({ id: 'temp', user: 'moi' });
    await saveLike();                 // échec => retour à `likes`
  });
}

Cas d'usage

Likes, commentaires, toggles : feedback instantané a l'utilisateur pendant la requête serveur.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2024/12/05/react-19
• react.dev/reference/react/useOptimistic