useTransition Hook

React Hook

ဒီတခါ ကျတော့ ကျတော်တို့ useTransition hook ဆိုတဲ့ဟာလေးကို လေ့လာလိုက်ကြရအောင်ပါ

အရင်ဆုံးကျတော်တို့ သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတာကိုလေ့လာကြရအောင်

သူက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ သူက UI ကို blocking မဖြစ်စေပဲနဲ့ state ကို update လုပ်ပေးတာမျိုးပါ

ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတာကို ကျတော်တို့ ကုဒ်လေးနည်းနည်းလေးဖြစ်ဖြစ်ရေးလိုက်ကြရအောင်ပါ

app.jsx

import { useState } from 'react'

function App () {
const [ tab , setTab ] = useState("about")
const handleClick = (link) => {
setTab(link)
}
    return(
    <>
        <button onClick={()=> handleClick("about")}>about<button>
        <button onClick={()=> handleClick("post")}>post<button>
        <button onClick={()=> handleClick("contact")}>contact<button>
        { tab === "about" && <About />}
        { tab === "post" && <Post />}
        { tab === "contact" && <Contact />}
    </>
    )
}
export default App

const About = () =>{
return <h3>Welcome! I am Bate Thar</h3>
}

const Contact = () => {
return <h3>Can you contact me at +1234567</h3>
}

const Post = ()=>{
const post = []
    for (let i=0; i<100000; i++){
        post.push(<h3>post{i} #</h3>)
    }
    return( <> { post } </> )
}

ဒီလိုလေးရေးပြီးသွားရင် ကျ‌တော်တို့ button လေးတွေကို နိပ်ကြည့်လိုက်ရအောင်

အဲမှာ ကျတော်တို့ about နဲ့ contact ကိုနိပ်တဲ့အခါမှာအဆင်ပြေနေပြီးတော့ post ကိုနိပ်တဲ့အခါမှာ တော်တော်လေး ကြာ

တာကိုမြင်ရပါလိမ့်မယ်

ဘာလို့လည်းဆိုတော့ ကျတော်တို့က post 1သိန်းလောက်ကို render လုပ်နေတာဖြစ်တဲ့အတွက် သူက တော်တော်လေး ကို

ကြာနေတာပါ

အဲအချိန်မှာဆိုရင် ကျတော်တို့ က တခြား button ကို ပြန်နိပ်လို့လည်း မရတာမျိုး ဖြစ်နေပါလိမ့်မယ်

ကျတော်တို့ post တွေအကုန် render လုပ်ပြီးတော့မှ တခြား button တွေနိပ်ထားတာကိုပြောင်းသွားတာကိုမြင်ရပါလိမ့်

မယ်

ပြောရရင် အဲဒါက ကျတော်တို့ state တွေ update လုပ်နေတုန်းမှာ UI က block ဖြစ်နေတာပါ

အဲဒါကို ကျတော်တို့ ဘယ်လိုမျိုး ဖြေရှင်းလို့ရတာလည်းဆိုတော့ useTransition Hook ဆိုတာလေးပဲဖြစ်ပါတယ်

ကျတော်တို့ ကုဒ်ကို ဒီလိုလေးပြင်လိုက်ပါမယ်

app.jsx

import { useState, useTransition } from 'react'

function App () {
const [ tab , setTab ] = useState("about")
const [ isPending, transitionStart ] = useTransition()
const handleClick = (link) => {
setTab(link)
}
    return(
    <>
        <button onClick={()=> handleClick("about")}>about<button>
        <button onClick={()=> handleClick("post")}>post<button>
        <button onClick={()=> handleClick("contact")}>contact<button>
        { tab === "about" && <About />}
        { tab === "post" && <Post />}
        { tab === "contact" && <Contact />}
    </>
    )
}
export default App

// rest of code

ကျတော်တို့ usetTransition ကို import လုပ်ပြီးတော့ ဒီအတိုင်းရေးလိုက်ပါမယ်

သူ့ကိုအသုံးပြုတဲ့အခါမှာ useState လိုမျိုးပါပဲ သူက value ၂ခုကို array လိုမျိုး return ပြန်ပေးပါတယ်

ပထမတခုကတော့ isPending ဆိုတဲ့ boolean ကို return ပြန်ပေးတဲ့ state updating အခြေအနေကို ပြပေးတဲ့ဟာပါ

နောက်တခုက ကျတော့ function / method ဖြစ်ပြီးတော့ သူက state update ကို interupt လုပ်ပေးပါတယ်

သူ့အထဲမှာကတော့ ကျတော်တို့ interupt လုပ်စေချင်တဲ့ function ( state update ) ကို ထည့်ပေးလို့ရပါတယ်

အဲဒါကို ကျတော်တို့ function ကို ဒီလိုလေး ပြင်လိုက်ပါမယ်

// rest of code 
const handleClick = (link) => {
    transitionStart(()=> {
        setTab(link)
        })
    }
    
    //rest of code

ကျတော်တို့ အပေါ်က လိုမျိုး ရေးပြီးတဲ့အခါမှာ ကျတော်တို့ ui ကိုတချက်ပြန်သွားကြည့်ကြရအောင်

ဒီတစ်ခါကျရင် ဘယ်လိုမျိုးဖြစ်သွားမှာလည်းဆိုတော့

ကျတော်တို့ post button ကိုနိပ်ပြီးလို့ တခြား button ကို ပြန်နိပ်ပြီးတော့ ပြောင်းလို့ရသွားတာကိုမြင်ရပါလိမ့်မယ်

သူ့နဲ့အတူပါလာတဲ့ isPending ကို ဘယ်လိုသုံးမှာလည်းဆိုတော့ ကျတော် ဒီလိုလေးရေးလိုက်ပါမယ်

// rest of code
{isPending ? <p>Lodaing....</p> 
: <button onClick={()=> handleClick("post")}>post</button>}
//rest of code

ဒီလိုလေးရေးလိုက်တဲ့အခါမှာ ကျတော်တို့က state update လုပ်တဲ့အခါမှာ သူက loading ဆိုတာလေးကိုပြနေမှာပါ

အဲလောက်ဆိုရင်တော့ နားလည်မယ်လို့ထင်ပါတယ်