useActionState, useFormStatus နဲ့ use Hook တွေက ဘာတွေလဲ?

React 18 ထွက်ရှိပြီးနောက်ပိုင်းမှာ React Server Components, Server Actions, Experimental API နဲ့ အသစ်ထွက်လာတဲ့ Hook တွေက React Community အတွင်း တော်တော်လေး ပေါက်ခဲ့ပါတယ်။ React 19 မှာတော့ useActionState, useFormStatus နဲ့ use Hook တွေကို Stable Version အဖြစ် သုံးလို့ရလာပါတယ်။ ဒီဆောင်းပါးမှာ အဆိုပါ Hook တွေရဲ့ အသုံးပြုမှုနဲ့ လုပ်ဆောင်မှု အသေးစိတ်ကို ရှင်းပြပါမယ်။

useActionState: The State Manager for Actions

React Server Action တွေကို Event Handler တွေ, <button> နဲ့ <form> Element တွေ၊ useEffect Hook အပြင် တခြားသော Third-party Library တွေကနေ ခေါ်ယူသုံးစွဲနိုင်ပါတယ်။ ဒါ့အပြင် Form Submission ပြုလုပ်လိုတဲ့အခါ <form> Element ရဲ့ action Attribute ကနေ Server Action တွေကို တိုက်ရိုက် ခေါ်ယူ Invoke လုပ် သုံးစွဲလိုက်ရုံပါပဲ။ Server Action တွေကြောင့် လွယ်ကူလာတဲ့ Form Handling လုပ်ငန်းစဉ်က useActionState Hook ကြောင့် လွယ်ကူတာထက် ပိုတဲ့အခြေအနေတရပ်ကို ရောက်ရှိသွားပါတယ်။
(React Action နဲ့ RCS တွေအကြောင်းကို ဒီဆောင်းပါးတွေမှာ အပြည့်အစုံ ဝင်ရောက်ဖတ်ရှုနိုင်ပါတယ်။)

useActionState က Server Action တခုရဲ့ Result ပေါ်မူတည်ပြီး State တွေကို Update လုပ်ပေးနိုင်တဲ့ Hook တခုပါ။ Action က Pending ဖြစ်နေလား၊ Success ဖြစ်သွားလား၊ Error တက်လားဆိုတာတွေကို ခြေရာခံပေးပြီး UI ကို Update လုပ်ဖို့ လွယ်ကူအောင် ကူညီပေးပါတယ်။ သာမန်အားဖြင့် Parameter နှစ်ခုပေးရပါမယ်။ ပထမ တခုက Server Function (တနည်းအားဖြင့် Server Action) ဖြစ်ပြီး ဒုတိယ တခုက Initial State တန်ဖိုးပါ။ useActionState ကနေ state, formAction နဲ့ isPending ဆိုတဲ့ တန်ဖိုးသုံးခုပါဝင်တဲ့ Array တခုကို Return ပြန်ပေးပါမယ်။

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

useActionState Hook ရဲ့ ပထမ Argument အဖြစ် Pass ပေးရမယ့် Function ဟာ Server Function ဖြစ်ရပါမယ်။ အဆိုပါ Server Function မှာ Parameter နှစ်ခုလက်ခံပေးရပါမယ်၊ previousState နဲ့ formData ပါ။

ယေဘုယျအားဖြင့် React မှာ Form Data တွေကို Manage လုပ်ရတဲ့အပိုင်းဟာ ခက်ခဲပင်ပန်းတယ်လို့ ဆိုရပါမယ်။ Input တွေကို Validate လုပ်ရတာ၊ Serialization လုပ်ရတာ၊ Server ဆီကို API Call တွေကဆင့် ပေးပို့ရတာ၊ ပြန်ရလာတဲ့ Response ဒေတာတွေကို Handle လုပ်ရတာ၊ သက်ဆိုင်ရာ Error Message ဒါမှမဟုတ် Success Message တွေကို ပြသပေးရတာ စသည်ဖြင့် ခက်ခဲရှုပ်ထွေးပါတယ်။

ဒီပြဿနာတွေကို Server Action ရဲ့ပံ့ပိုးမှုနဲ့အတူ useActionState Hook က ကုဒ်ပမာဏအနည်းဆုံးနဲ့ ဖြေရှင်းပေးသွားပါတယ်။

ဥပမာ, Login Form တစ်ခုဆောက်တယ်ဆိုပါစို့။ User က "Submit" နှိပ်လိုက်တဲ့အခါ Loading Spinner ပြမယ်၊ Server က User ကို ခွင့်မပြုဘူးဆိုရင် Error ပြမယ်၊ အောင်မြင်ရင် Success Message ပြမယ်။ ဒီလိုအခြေအနေတွေကို စီမံဖို့အတွက် useActionState ကို သုံးပါမယ်။

import { useActionState } from 'react';

function LoginForm() {

  const [state, submitAction] = useActionState(async (formData) => {

    // Server Request ကို Simulate လုပ်ပေးတဲ့ Action

    await new Promise((resolve) => setTimeout(resolve, 1000));

    if (formData.get('email') === '[email protected]') {

      throw new Error('Unauthorized? Login Fail.');

    }

    return 'Login successfully!';

  });

  return (

    <form action={submitAction}>

      <input name="email" placeholder="Enter your email" />

      <button type="submit">Submit</button>

      {state.isPending && <p>Loading...</p>}

      {state.error && <p>Error: {state.error.message}</p>}

      {state.data && <p>{state.data}</p>}

    </form>

  );

}

နမူနာအရ useActionState က Loading State, Error တွေ, Success Message တွေကို အလိုအလျောက် စီမံပေးသွားပါတယ်။ သမရိုးကျနည်းလမ်းတွေဖြစ်တဲ့ useState နဲ့ useEffect တွေအသုံးပြုပြီး ဖန်တရာထပ်နေတဲ့ ကုဒ်တွေကို ရေးသားဖို့ မလုပ်အပ်တော့ပါဘူး။

useFormStatus: The Form Whisperer

useFormStatus အကြောင်းကို ဆက်ပါမယ်။ ဒီ Hook က React DOM ရဲ့ Hook ပါ။

Form တစ်ခုရဲ့ လက်ရှိ Status ကို သိဖို့အတွက် useFormStatus Hook ကို သုံးပါတယ်။ Form ကို Submit လုပ်နေချိန် Pending, Success, Fail စတာတွေကို ခြေရာခံနိုင်ပါတယ်။ တိတိကျကျပြောရရင် နောက်ဆုံး Submit လုပ်ထားတဲ့ Form ရဲ့ အချက်အလက်တွေကို ခြေရာခံနိုင်တာပါ။

useFormStatus က status ဆိုတဲ့ Object တခုကို Return ပြန်ပေးမှာဖြစ်ပြီး Parameter ထည့်ပေးဖို့ မလိုပါ။ status ထဲမှာ pending, data, method နဲ့ action ဆိုတဲ့ ဒေတာတွေ ပါဝင်ပါတယ်။ status က Form ရဲ့ Pending အခြေအနေကို ဖော်ပြပြီး data က User ပေးပို့လိုက်တဲ့ အချက်အလက်တွေပါ။ method က Form ရဲ့ HTTP Method ဖြစ်ပြီး action က Form ရဲ့ Action Prop ထဲမှာ ထည့်သွင်းပေးလိုက်တဲ့ Function Reference ပါ။

ဥပမာ, User က "Submit" ကို နှစ်ခါနှိပ်မိလား သိရဖို့ ဒါမှမဟုတ် Form ကို Process လုပ်နေချိန်မှာ Button ကို Disable လုပ်ဖို့ ဒါမှမဟုတ် Loading Indicator ပြဖို့ သုံးပါတယ်။

နမူနာအနေနဲ့ -

import { useFormStatus } from 'react';

function SubmitButton() {

  const { pending } = useFormStatus();

  return (

    <button type="submit" disabled={pending}>

      {pending ? 'Submitting...' : 'Submit'}

    </button>

  );

}

function PizzaForm() {

  return (

    <form action="/submit-pizza">

      <input name="topping" placeholder="Enter your topping" />

      <SubmitButton />

    </form>

  );

}

ဒီနမူနာမှာ useFormStatus က Form ကို Submit လုပ်နေလားဆိုတာ ဖော်ပြပါတယ်။ Submit လုပ်နေရင် Button ကို Disable လုပ်ပြီး "Submitting..." ဆိုတဲ့ Label ပြပါမယ်။

useFormStatus မှာ သတိထားရမယ့် အချက်ရှိပါတယ်။ တူညီတဲ့ Component တခုထဲမှာ ရှိနေတဲ့ <form> ရဲ့ Status ကို Return မပြန်ပေးနိုင်ပါဘူး။ useFormStatus ကို သီးခြား Component တခု တနည်းအားဖြင့် <form> ထဲမှာရှိနေတဲ့ Component အဖြစ်သာ အသုံးပြုရပါမယ်။

useFormStatus will not return status information for a <form> rendered in the same component.

The use Hook: The Async Magician

နောက်ဆုံးအနေနဲ့ use Hook အကြောင်း ပြောပါမယ်။ ဒီ Hook က Form တွေ, Action တွေအတွက်ပဲ မဟုတ်ဘဲ ဘယ် Async Operation အတွက်မဆို သုံးလို့ရပါတယ်။ တနည်းအားဖြင့် Promise တို့၊ Context တို့လို Resources တွေရဲ့ Value ကို ပြန်ပေးနိုင်တာပါuse Hook ကိuseEffect ဒါမှမဟုတ် useState ရဲ့ ပိုလွယ်ကူတဲ့ Version လို့ မြင်လို့ရပါတယ်။

use Hook ကို သုံးပြီး Promise တစ်ခုကို Component ထဲမှာ တိုက်ရိုက် Resolve လုပ်နိုင်ပါတယ်။ React က ကျန်တာတွေကို အလိုအလျောက် စီမံပေးသွားမှာပါ။ အဲဒီအပြင် တခြားသော Hook တွေနဲ့ မတူတာက Conditional Statement တွေ, Loop တွေထဲမှာပါ ခေါ်ယူသုံးစွဲလို့ရတဲ့ အချက်ပါ။ နောက်ဆုံးတချက်ကတော့ Pending လုပ်နေချိန်မှာ Component ကို Suspend လုပ်ပေးနိုင်တာပါ။ ပွင့်ပွင့်လင်းလင်းပြောရရင် use Hook က ထင်ထားတာထက် ပိုပြီး အသုံးဝင်တဲ့ Hook တခုပါပဲ။

ဥပမာ -

import { use } from 'react';

function UserProfile({ userId }) {

  const user = use(fetchUser(userId));

  return (

    <div>

      <h1>{user.name}</h1>

      <p>{user.bio}</p>

    </div>

  );

}

async function fetchUser(userId) {

  const response = await fetch/api/users/${userId});

  return response.json();

}

ဒီဥပမာမှာ use က fetchUser ကနေ Return ပြန်ပေးလာတဲ့ Promise ကို Component ထဲမှာ တိုက်ရိုက် စီမံပေးပါတယ်။ ဒါဟာ Component တွေထဲမှာ Async Data Fetching တွေကို ရိုးရှင်းအောင် လုပ်ပေးနိုင်မယ့် Game-Changer တခုပါပဲ။

Promise တခုကို Server Component ကတဆင့် Client Component ဆီကို ပေးပို့ပြီး Client Component မှာ use API နဲ့ Resolve လုပ်နိုင်သလို Server Component ထဲမှာပဲ Promise တွေကို await နဲ့ တခါတည်း Resolve လုပ်နိုင်ပါတယ်။

ဒီနေရာမှာ မေးစရာတခုရှိလာပါတယ်။

Promise တွေကို Server Component ထဲမှာ Resolve လုပ်ရမှာလား, Client Component ထဲမှာ Resolve လုပ်ရမှာလား ဆိုတာပါ။

Server Component ထဲမှာ await နဲ့ တခါတည်း Involve လုပ်တဲ့နည်းလမ်းက Rendering ကို Block လုပ်ပါတယ်။ ဒီအတွက်ကြောင့် Server ဖက်မှာ Generate လုပ်မပြီးမချင်း User ဖက်က စောင့်ဆိုင်းနေရမှာပါ။ ဒီအချက်က Waterfall Network အခြေအနေတွေမှာ Performance ကို ထိခိုက်နိုင်စေပါတယ်။

ဒီ Hook တွေကို ဘယ်အချိန်၊ ဘယ်နေရာတွေမှာ သုံးရမလဲ။

Hook တွေက အသုံးဝင်တယ်ဆိုပေမယ့် ကိုယ်တိုင်သုံးဖို့ လိုအပ်လာတဲ့အခါ လိုအပ်ချက်ပေါ် မူတည်ပြီး သင့်သလို အသုံးပြုရမှာပါပဲ။ Form တွေဆောက်မယ်၊ Async Actions တွေ စီမံမယ်၊ Data Fetching တွေ လုပ်မယ်ဆိုရင် ဒီ Hook တွေက သမရိုးကျ Boilerplate ကုဒ်တွေကို လျှော့ချပေးပြီး Component တွေကို ပိုမိုရှင်းလင်းအောင် ကူညီပေးနိုင်မှာပါ။

အဲဒီအပြင် ဒီ Hook တွေက Community လိုအပ်ချက်အပေါ်မူတည်ပြီး ပြင်ဆင်လာခဲ့တဲ့ React ရဲ့ သိသာတဲ့ပြောင်းလဲမှုတွေလို့ ဆိုရမှာပါပဲ။ ပိုပြီး Declarative ဖြစ်လာပြီး Low-Level Detail တွေကို စီမံဖို့ လိုအပ်ချက်တွေလည်း နည်းလာပါတယ်။ useActionState, useFormStatus, နဲ့ use တို့လို Hook တွေနဲ့အတူ React က "Focus on what your app does, not how it does it." ဆိုတဲ့ သဘောတရားကို အပြည့်အဝ ပုံဖော်လာနေတယ်လို့ ဆိုရမှာပါပဲ။

#CodeWithThura #react #hook #useActionState #use #useFormStatus