React Actions & Optimistic UI

React Actions & Optimistic UI ကို pending, success, empty, error, retry, cancellation နဲ့ navigation recovery states ပါသော user flow အဖြစ်တည်ဆောက်ပါ။ Route သို့ async boundary တစ်ခုချင်းစီတွင် fallback နဲ့ error recovery ကိုရည်ရွယ်ချက်ရှိရှိထားပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

React Actions & Optimistic UI ကို pending, success, empty, error, retry, cancellation နဲ့ navigation recovery states ပါသော user flow အဖြစ်တည်ဆောက်ပါ။ Route သို့ async boundary တစ်ခုချင်းစီတွင် fallback နဲ့ error recovery ကိုရည်ရွယ်ချက်ရှိရှိထားပါ။

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

React Actions & Optimistic UI example ကို empty/loading/error states, keyboard-only interaction, slow network, rapid repeated events နဲ့ component unmount/remount cases ဖြင့်စမ်းပါ။ Browser console, React DevTools, tests နဲ့ profiler ကိုလိုအပ်သလိုအသုံးပြုပြီး behavior ကိုအတည်ပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

• Source of truth နဲ့ component boundary ကိုရှင်းပြနိုင်ခြင်း
• Keyboard နှင့် failure state ပါသော example ရေးနိုင်ခြင်း
• User-visible behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

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

export default function LikeButton({ saveLike }) {
  const [liked, setLiked] = useState(false);
  const [optimisticLiked, setOptimisticLiked] = useOptimistic(liked);

  function toggle() {
    const next = !optimisticLiked;
    startTransition(async () => {
      setOptimisticLiked(next);
      const saved = await saveLike(next);
      setLiked(saved);
    });
  }
  return <button onClick={toggle}>{optimisticLiked ? 'Liked' : 'Like'}</button>;
}

Button က ချက်ချင်းတုံ့ပြန်ပြီး server အတည်ပြုထားသော value နှင့်နောက်ဆုံးညီသွားမည်။

useOptimistic — React