useOptimistic สำหรับการตอบสนองทันที

ยินดีต้อนรับ

ส่วนติดต่อผู้ใช้แบบมองโลกในแง่ดีคืออะไร

พื้นฐานของ useOptimistic

'use client';
import { useOptimistic } from 'react';

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,                      // actual state from server
  (state, newLike) => [...state, newLike] // how to apply optimistic update
);

ตัวอย่างปุ่มถูกใจ

async function handleLike() {
  addOptimisticLike({ id: Date.now(), user: currentUser });
  await likePost(postId); // server action
}

สถานะแบบมองโลกในแง่ดีอยู่ที่ใด

ตัวบ่งชี้รอดำเนินการบนรายการแบบมองโลกในแง่ดี

const [optimisticMessages, addOptimistic] = useOptimistic(
  messages,
  (state, msg) => [...state, { ...msg, pending: true }]
);

// Render
{optimisticMessages.map(m => (
  <div key={m.id} style={{ opacity: m.pending ? 0.6 : 1 }}>{m.text}</div>
))}

การใช้ภายในทรานซิชัน

'use client';
import { startTransition } from 'react';

const handleSubmit = (data) => {
  startTransition(async () => {
    addOptimistic(data);
    await serverAction(data);
  });
};

ตัวอย่างการส่งข้อความแชต

พฤติกรรมการย้อนกลับเมื่อเกิดข้อผิดพลาด

useOptimistic เทียบกับการอัปเดตแบบมองโลกในแง่ดีด้วยตนเอง

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

จบหลักสูตร