樂觀更新 Optimistic Updates 是什麼？如何在 React 中使用樂觀更新？

樂觀更新 Optimistic Updates 是什麼？如何在 React 中使用樂觀更新？ | ThisWeb 請網這邊走

javascript

import { useOptimistic } from 'react';

function App() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state, // 接收的第一個參數：初始 state
    // 接收的第二個參數：處理樂觀更新的函數 updateFn
    (currentState, optimisticValue) => {
      // 回傳生成的樂觀狀態，當非同步處理完成後回傳真正的新值
    }
  );
}

javascript

const initValue = [{ todo: '買牛奶' }];

const [state, setState] = useState(initValue);
const [optimisticState, setOptimisticState] = useOptimistic(
  state,
  (currentState, optimisticValue) => {
    return [...state, { todo: optimisticValue }];
  }
);

javascript

// 模擬新增代辦事項的操作
export async function addTodoAction(todo) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve(todo);
      } else {
        reject('Failed!');
      }
    }, 1000);
  });
}

javascript

import { useState, useRef } from 'react';

// 應用程式主體
export default function App() {
  const formRef = useRef();

  const [todos, setTodos] = useState([{ text: '買牛奶', sending: false }]);

  const formAction = async (formData) => {
    //...
  };

  return (
    <>
      <h1>你的代辦清單</h1>
      <ul>{/* 你的代辦清單 */}</ul>

      <br />

      <form action={formAction} ref={formRef}>
        <input type="text" name="todo" placeholder="輸入代辦事項" />
        <button type="submit">新增</button>
      </form>
    </>
  );
}

javascript

import { useState, useRef } from 'react';

// 應用程式主體
export default function App() {
  const formRef = useRef();

  const [todos, setTodos] = useState([{ text: '買牛奶', sending: false }]);

  // 👇 formAction
  const formAction = async (formData) => {
    const newTodo = formData.get('todo');
    formRef.current.reset();

    try {
      const response = await addTodoAction(newTodo);
      setTodos((prevTodos) => [
        ...prevTodos,
        { text: response, sending: false },
      ]);
    } catch (err) {
      alert('代辦事項添加失敗');
    }
  };

  return (
    <>
      <h1>你的代辦清單</h1>
      <ul>
        {/* 👇 用 map 去渲染所有的 todo */}
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>

      <br />

      <form action={formAction} ref={formRef}>
        <input type="text" name="todo" placeholder="輸入代辦事項" />
        <button type="submit">新增</button>
      </form>
    </>
  );
}

javascript

import { useOptimistic, useState, useRef } from 'react';

// 模擬新增代辦事項的操作
export async function addTodoAction(todo) {
  //...
}

// 應用程式主體
export default function App() {
  // ...
  // 👇 useOptimistic
  const [optimisticTodos, setOptimisticTodos] = useOptimistic(
    todos, // 初始狀態
    // 會先生成樂觀狀態，直到新的 todos state 更新後才會取代樂觀狀態
    (currentTodos, newTodo) => [
      ...currentTodos,
      {
        text: newTodo,
        sending: true,
      },
    ]
  );

  //...

  return <>{/*...*/}</>;
}

javascript

import { useOptimistic, useState, useRef } from "react";

// 模擬新增代辦事項的操作
export async function addTodoAction(todo) {
 //...
}

// 應用程式主體
export default function App() {
  // ...
  const [optimisticTodos, setOptimisticTodos] = useOptimistic(...);

  const formAction = async (formData) => {
    const newTodo = formData.get("todo");

    //👇 樂觀更新 UI
    setOptimisticTodos(newTodo);
    formRef.current.reset();

    // 👇 回傳成功後，用真正的資料更新的 UI
    try {
      const response = await addTodoAction(newTodo);
      setTodos((prevTodos) => [
        ...prevTodos,
        { text: response, sending: false },
      ]);
    } catch (err) {
      // 👇 如果失敗，就將 todo state 還原，用來還原 optimisticTodos
      alert("代辦事項添加失敗");
      setTodos((prevTodos) => [...prevTodos]);
    }
  };

  //...

  return (<>{/*...*/}</>)
}

javascript

import { useOptimistic, useState, useRef } from "react";

//...

  return (
    <>
      <h1>你的代辦清單</h1>
      <ul>
        {/* 👇 map 樂觀狀態 */}
        {optimisticTodos.map((todo, index) => (
          <li key={index}>
            {todo.text}
            {/* 👇 當真正狀態更新前，會顯示由 useOptimistic 生成的樂觀狀態*/}
            {/* 也就是 todo.sending 會是 true*/}
            {!!todo.sending && <span>(Sending...)</span>}
          </li>
        ))}
      </ul>

      <br />

      <form action={formAction} ref={formRef}>
        <input type="text" name="todo" placeholder="輸入代辦事項" />
        <button type="submit">新增</button>
      </form>
    </>
  );
}

javascript

import { useOptimistic, useState, useRef } from 'react';

// 模擬新增代辦事項的操作
export async function addTodoAction(todo) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve(todo);
      } else {
        reject('Failed!');
      }
    }, 1000);
  });
}

// 應用程式主體
export default function App() {
  const formRef = useRef();

  const [todos, setTodos] = useState([{ text: '買牛奶', sending: false }]);

  // useOptimistic
  const [optimisticTodos, setOptimisticTodos] = useOptimistic(
    todos, // 初始狀態
    // 會先生成樂觀狀態，直到新的 todos state 更新後才會取代樂觀狀態
    (currentTodos, newTodo) => [
      ...currentTodos,
      {
        text: newTodo,
        sending: true,
      },
    ]
  );

  const formAction = async (formData) => {
    const newTodo = formData.get('todo');

    // 樂觀更新 UI
    setOptimisticTodos(newTodo);
    formRef.current.reset();

    // 回傳成功後，用真正的資料更新的 UI
    try {
      const response = await addTodoAction(newTodo);
      setTodos((prevTodos) => [
        ...prevTodos,
        { text: response, sending: false },
      ]);
    } catch (err) {
      // 如果失敗，就將 todo state 還原，用來還原 optimisticTodos
      alert('代辦事項添加失敗');
      setTodos((prevTodos) => [...prevTodos]);
    }
  };

  return (
    <>
      <h1>你的代辦清單</h1>
      <ul>
        {/* map 樂觀狀態 */}
        {optimisticTodos.map((todo, index) => (
          <li key={index}>
            {todo.text}
            {/* 當真正狀態更新前，會顯示由 useOptimistic 生成的樂觀狀態*/}
            {/* 也就是 todo.sending 會是 true*/}
            {!!todo.sending && <span>(Sending...)</span>}
          </li>
        ))}
      </ul>

      <br />

      <form action={formAction} ref={formRef}>
        <input type="text" name="todo" placeholder="輸入代辦事項" />
        <button type="submit">新增</button>
      </form>
    </>
  );
}

樂觀更新 Optimistic Updates 是什麼？如何在 React 中使用樂觀更新？

免費訂閱電子報！

甚麼是樂觀更新 Optimistic Updates？

樂觀更新 Optimistic Updates 的優點

使用樂觀更新 Optimistic Updates

什麼時候適合使用樂觀更新 Optimistic Updates

什麼時候不適合使用樂觀更新 Optimistic Updates

當回應失敗時如何處理樂觀更新？

如何在 React 中如何實現樂觀更新 - useOptimistic

useState 和 useOptimistic 的差別

實做 useOptimistic

沒有樂觀更新的作法

使用樂觀更新的做法

小結

下一篇看什麼？

10 大設計網站提升你的審美！讓你的網站更有質感

2026 前端框架怎麼選？React、Vue、Angular 完整比較指南

React 是什麼？2026 完整新手學習指南