Hook useOptimistic trong React: UI tức thì, tự hoàn tác

useOptimistic là một hook của React 19 cho phép màn hình hiện kết quả của một action trước khi action đó xong. Bạn đặt một giá trị optimistic bên trong action; React hiện nó trong lúc action đang chờ, rồi quay về state thật. Nếu request thất bại, state thật chưa từng thay đổi, nên màn hình tự hoàn tác.

API giả trong ví dụ này đóng vai một request thật và thất bại cứ mỗi lần gọi thứ ba, để bạn thấy được cả hai kết quả.

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

let calls = 0;
function saveLike(liked) {
    // Stands in for a real request. Every third call fails.
    calls += 1;
    const fails = calls % 3 === 0;
    return new Promise((resolve, reject) =>
        setTimeout(() => (fails ? reject(new Error('Network error')) : resolve(liked)), 1000),
    );
}

export default function App() {
    const [liked, setLiked] = useState(false);
    const [optimisticLiked, setOptimisticLiked] = useOptimistic(liked);
    const [error, setError] = useState('');

    function toggle() {
        const next = !optimisticLiked;
        setError('');
        startTransition(async () => {
            setOptimisticLiked(next);
            try {
                await saveLike(next);
                startTransition(() => setLiked(next));
            } catch (e) {
                setError(`${e.message}, so the change was undone.`);
            }
        });
    }

    return (
        <div>
            <button onClick={toggle}>{optimisticLiked ? 'Liked' : 'Like'}</button>
            <p style={{ color: '#666' }}>Saved on the server: {liked ? 'liked' : 'not liked'}</p>
            {error && <p style={{ color: 'crimson' }}>{error}</p>}
        </div>
    );
}

Click nút ba lần, mỗi lần cách nhau một giây. Hai lần đầu đổi ngay lập tức và dòng đã lưu theo kịp sau một giây. Lần thứ ba cũng đổi ngay, rồi lật lại khi request thất bại. Đổi calls % 3 thành calls % 2 thì cứ hai lần click lại có một lần thất bại.

Cú pháp

const [optimisticState, setOptimistic] = useOptimistic(state, updateFn?);

• state là giá trị thật, thường lấy từ useState, props hoặc useActionState. Khi không có action nào đang chờ, optimisticState chính là giá trị này.
• setOptimistic(value) đặt giá trị optimistic trong suốt thời gian action hiện tại chạy.
• updateFn là không bắt buộc: (currentState, optimisticValue) => nextState. Có nó, setOptimistic nhận một phần thay đổi thay vì cả một giá trị mới. Xem dạng reducer bên dưới.

Vòng đời của một lần click luôn giống nhau:

1. Bên trong một action, bạn gọi setOptimistic. Màn hình cập nhật ngay.
2. Action chờ request.
3. Nếu thành công, bạn cập nhật state thật (bên trong startTransition khi việc đó nằm sau một await).
4. Action kết thúc. optimisticState lại bám theo state: giá trị đã lưu nếu thành công, giá trị cũ nếu thất bại.

Bước 4 là lý do ví dụ không có code hoàn tác nào. Khối catch chỉ đặt một thông báo lỗi.

Phải chạy bên trong một action

Giá trị optimistic chỉ tồn tại khi một transition đang chờ, nên setOptimistic phải được gọi bên trong một transition. Tất cả những chỗ sau đều được tính:

• hàm bạn truyền cho startTransition (hoặc startTransition lấy từ useTransition),
• hàm truyền cho <form action={...}> hoặc <button formAction={...}>,
• action bạn đưa cho useActionState.

Nếu gọi từ một onClick thông thường, giá trị optimistic không có action nào để tồn tại bên trong. React hoàn tác nó ngay, và trong môi trường phát triển React ghi log "An optimistic state update occurred outside a transition or action".

Các cập nhật state thật diễn ra sau một await nên được bọc trong startTransition riêng, như startTransition(() => setLiked(next)) ở trên. Sau một await, React không thể biết bạn vẫn đang ở trong transition trước đó.

Danh sách tin nhắn với dạng reducer

Khi state optimistic là một danh sách, hãy truyền một hàm cập nhật làm đối số thứ hai. Khi đó setter nhận phần tử mới, và React nối nó vào danh sách thật tại thời điểm đó.

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

let calls = 0;
function deliver(text) {
    // Stands in for a real request. Every third message fails.
    calls += 1;
    const id = calls;
    const fails = id % 3 === 0;
    return new Promise((resolve, reject) =>
        setTimeout(() => (fails ? reject(new Error('failed')) : resolve({ id, text })), 1200),
    );
}

export default function App() {
    const [messages, setMessages] = useState([{ id: 0, text: 'Hi there' }]);
    const [failed, setFailed] = useState([]);
    const [optimisticMessages, addOptimistic] = useOptimistic(messages, (current, text) => [
        ...current,
        { id: `pending-${text}`, text, sending: true },
    ]);

    async function send(formData) {
        const text = formData.get('text');
        addOptimistic(text);
        try {
            const saved = await deliver(text);
            startTransition(() => setMessages((list) => [...list, saved]));
        } catch {
            setFailed((list) => [...list, text]);
        }
    }

    return (
        <div>
            {optimisticMessages.map((m) => (
                <p key={m.id} style={{ margin: '4px 0', opacity: m.sending ? 0.5 : 1 }}>
                    {m.text} {m.sending && <small>(sending...)</small>}
                </p>
            ))}
            {failed.map((text, i) => (
                <p key={i} style={{ color: 'crimson', margin: '4px 0' }}>Not sent: {text}</p>
            ))}
            <form action={send}>
                <input name="text" defaultValue="Hello" />
                <button type="submit">Send</button>
            </form>
        </div>
    );
}

Gửi lần lượt ba tin nhắn với nội dung khác nhau. Mỗi tin hiện mờ kèm "(sending...)" và rõ nét khi đã gửi xong; tin thứ ba biến khỏi khung chat và hiện thành "Not sent". Nếu gửi thật nhanh, cả ba vẫn mờ cho đến khi request cuối cùng kết thúc, vì React giữ các giá trị optimistic cho đến khi mọi action đang chờ đã xong. Form action vốn đã là một transition, nên ở đây addOptimistic không cần startTransition riêng.

Cho mỗi phần tử optimistic một key không trùng với phần tử thật. Ví dụ dùng pending- cộng với nội dung tin, nên gửi cùng một nội dung hai lần khi cả hai đều đang chờ sẽ bị trùng; ứng dụng thật sẽ tạo id ở phía client.

Nhiều cập nhật cùng lúc

Vì hàm cập nhật nhận state hiện tại, các cập nhật optimistic chồng lên nhau. Click nhanh thì mỗi lần click đang chờ được áp lên trên lần trước.

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

let calls = 0;
function addToCart() {
    // Stands in for a real request. Every third call fails.
    calls += 1;
    const fails = calls % 3 === 0;
    return new Promise((resolve, reject) => setTimeout(() => (fails ? reject(new Error()) : resolve()), 1500));
}

export default function App() {
    const [count, setCount] = useState(0);
    const [optimisticCount, addOptimistic] = useOptimistic(count, (current, delta) => current + delta);

    function handleClick() {
        startTransition(async () => {
            addOptimistic(1);
            try {
                await addToCart();
                startTransition(() => setCount((c) => c + 1));
            } catch {
                console.log('one request failed');
            }
        });
    }

    return (
        <div>
            <button onClick={handleClick}>Add to cart</button>
            <p>In cart: {optimisticCount}</p>
            <p style={{ color: '#666' }}>Confirmed: {count}</p>
        </div>
    );
}

Click nhanh bốn lần. Giỏ hàng hiện 4 ngay lập tức. Khi các request xong, con số dừng ở 3, vì request thứ ba thất bại và console có ghi lại. React giữ các giá trị optimistic cho đến khi mọi action đang chờ đã xong, rồi hiện số lượng thật.

Khi nào nên dùng, khi nào không

Cập nhật optimistic hợp với những action gần như luôn thành công và dễ hoàn tác: thích, gắn sao, bật tắt, đổi tên, thêm tin nhắn. Trong trường hợp thường gặp, người dùng không phải thấy biểu tượng đang tải.

Tránh dùng chúng ở chỗ một trạng thái "đã xong" giả sẽ gây hiểu lầm: thanh toán, xóa tài khoản, bất cứ thứ gì người dùng có thể hành động dựa vào trước khi biết kết quả. Với những trường hợp đó, hãy hiện trạng thái đang chờ bằng isPending từ useActionState hoặc useTransition và đợi câu trả lời thật.

Luôn báo cho người dùng khi có hoàn tác. Một giá trị lặng lẽ đổi lại trông giống bug. Cả hai ví dụ trên giữ thông báo lỗi trong state thông thường để nó tồn tại lâu hơn action.

Kết hợp với useActionState

useOptimistic và useActionState đi cùng nhau rất hợp. Action từ useActionState vốn đã là một transition, nên bạn có thể đặt giá trị optimistic ngay đầu action, và state trả về là giá trị thật mà giá trị optimistic quay về.

const [state, formAction] = useActionState(async (previous, formData) => {
    const title = formData.get('title');
    setOptimisticTitle(title);
    const saved = await saveTitle(title);
    return { title: saved.title };
}, { title: 'Untitled' });

const [optimisticTitle, setOptimisticTitle] = useOptimistic(state.title);

Trong lúc lưu, trang hiện tiêu đề mới. Khi xong, state.title chứa giá trị đã lưu. Nếu saveTitle ném lỗi, lỗi của action sẽ đi tới error boundary gần nhất; để hiện lại tiêu đề cũ kèm thông báo, hãy bắt lỗi bên trong action và trả về state trước đó cùng với lỗi.

Lỗi thường gặp

Gọi setter bên ngoài action. Giá trị optimistic không ở lại trên màn hình, và React cảnh báo trong môi trường phát triển. Bọc nó trong startTransition hoặc chuyển nó vào một form action.

Quên cập nhật state thật. Khi thành công, action phải thay đổi state mà useOptimistic phản chiếu (setLiked, setMessages). Nếu không, giá trị optimistic biến mất khi action kết thúc, và một request thành công trông như bị hoàn tác.

Cập nhật state thật sau await mà không có transition. Cập nhật vẫn được áp dụng, nhưng React có thể hiện nó vào một thời điểm khác với lúc action kết thúc. Hãy bọc nó trong startTransition, như cả ba ví dụ đều làm.

Dùng giá trị optimistic làm nguồn dữ liệu chính. Gửi request và tính tổng từ state thật. Giá trị optimistic chỉ để hiển thị và có thể bị bỏ đi bất cứ lúc nào.