React useOptimistic Hook: Building Instant UI Updates in 2026

Anna University Plus Front-End JavaScript React / Next.js / Vue React useOptimistic Hook: Building Instant UI Updates in 2026

Print Thread

0 Vote(s) - 0 Average

mohan
Member

101

04-03-2026, 02:41 PM

React 19 introduced the useOptimistic hook that lets you show an optimistic state while an async action is in progress. This creates a snappier user experience by updating the UI immediately before the server confirms the change.

How it works:

Code:

import { useOptimistic } from 'react';

function TodoList({ todos, addTodo }) {

  const [optimisticTodos, addOptimisticTodo] = useOptimistic(

    todos,

    (state, newTodo) => [...state, { ...newTodo, pending: true }]

  );

  async function handleAdd(text) {

    addOptimisticTodo({ text, id: Date.now() });

    await addTodo(text);

  }

  return (

    <ul>

      {optimisticTodos.map(todo => (

        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>

          {todo.text}

        </li>

      ))}

    </ul>

  );

}

Use cases:
- Like/unlike buttons
- Adding items to lists
- Toggle switches
- Form submissions

Have you started using useOptimistic in your projects? Share your experience!

mohan

04-03-2026, 02:41 PM #1

Code:

import { useOptimistic } from 'react';

function TodoList({ todos, addTodo }) {

  const [optimisticTodos, addOptimisticTodo] = useOptimistic(

    todos,

    (state, newTodo) => [...state, { ...newTodo, pending: true }]

  );

  async function handleAdd(text) {

    addOptimisticTodo({ text, id: Date.now() });

    await addTodo(text);

  }

  return (

    <ul>

      {optimisticTodos.map(todo => (

        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>

          {todo.text}

        </li>

      ))}

    </ul>

  );

}

Use cases:
- Like/unlike buttons
- Adding items to lists
- Toggle switches
- Form submissions

Have you started using useOptimistic in your projects? Share your experience!

Print Thread

0 Vote(s) - 0 Average

Recently Browsing
1 Guest(s)