useDeferredValue Hook

React Hook

ဒီတစ်ခါ ကျတော်တို့ ဆက်လေ့လာသွားကြမှာက useDeferredValue ဆိုတဲ့ react hook လေးတခုပါ

အဲကောင်က ဘယ်လိုအလုပ်လုပ်တာလည်းဆိုတာကို ကျတော်တို့ ဒီလိုလေးလေ့လာလိုက်ကြရအောင်

အရင်ဆုံး ကျတော်တို့ app.js မှာ ဒီလိုလေးရေးလိုက်ပါမယ်

app.jsx

import { useState,memo } from 'react'

function App () {
const [ text, setText ] = useState("")

return ( <>
        <input value={text} onChange={ e => setText(e.target.value) } />
        <Listing text={text} />
        </>
    )
}

export default App

 memo(function Listing ({ text }) {
let render = [] 
        for(let i = 0 ; i < 10000 ; i++){
        render.push(<div key={i}> input : { text } </div>)
        }
        return ( <> { render } </> )
})

ကုဒ်ကိုကြည့်လိုက်တဲ့အခါမှာ ကျတော်တို့ တွေ့ရမှာက listing ကို အကြိမ် ၁သောင်း render လုပ်ထားတာကိုမြင်ရပါမယ်

အဲဒါကို ကျတော်တို့က input မှာ စာလေး နည်းနည်းလောက် ရိုက်ကြည့်လိုက်တဲ့အခါမှာ UI က slow ဖြစ်ပြီးတော့

render ကနှေးနေတာကိုမြင်ရပါလိမ့်မယ်

ကျတော်တို့က တကယ်လို့ နောက်ပိုင်းကျရင် listing တွေအများကြီးထဲကနေပြီးတော့ တခုခုကိုရှာစေချင်တာပဲဖြစ်ဖြစ်

api မှာ search လုပ်တာပဲဖြစ်ဖြစ် ဒီလိုမျိုးတွေကြုံလာရနိုင်ပါတယ်

အဲအတွက်ကြောင့် react ကနေပြီးတော့ useDeferredValue ဆိုတဲ့ Hook တစ်ခုကို create လုပ်ပေးထားပါတယ်

ကျတော်တို့ ဒီမှာ တခု သတိထားမိမှာက memo ဆိုတဲ့ function လေးကို Listing Component မှာ သုံးထားတာပါပဲ

ဘာလို့ သုံးတာလည်းဆိုတော့ ကျတော်တို့က parent ကနေပြီးတော့ state update လုပ်လိုက်တဲ့အခါမှာ child ကိုပါ

re-render လုပ်နေတာမလို့ပါ အဲအတွက်ကြောင့် ကျတော်တို့က memo ဆိုပြီးတော့ child component ကို cache

အနေနဲ့ ထိန်းပေးထားလိုက်ပါတယ်

performance အတွက် လည်းပိုကောင်းသွားတာပေါ့

ကဲ ကျတော်တို့ ဆက်ပြီးတော့ကြည့်လိုက်ကြရအောင်

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

import { useState, memo,  useDeferredValue } from 'react'

function App () {
const [ text, setText ] = useState("")
const deferredText = useDeferredValue(text)

return ( <>
        <input value={text} onChange={ e => setText(e.target.value) } />
        <Listing text={deferredText} />
        </>
    )
}

export default App

memo(function Listing ({ text }) {
let render = [] 
        for(let i = 0 ; i < 10000 ; i++){
        render.push(<div key={i}> input : { text } </div>)
        }
        return ( <> { render } </> )
})

ဒီတစ်ခါမှာ ကျတော်တို့ က useDeferredValue Hook ကို import လုပ်လိုက်ပြီးတော့ သူရဲ့ parameter ထဲမှာ state

ကိုထည့်ပေးလိုက်တာပါ

သူကဘယ်လိုအလုပ်လုပ်သွားတာလည်းဆိုတော့ ကျတော်တို့ debounce / တို့ throttle တို့ အလုပ်လုပ်ပုံနဲ့ တော့

နည်းနည်းဆင်ပါတယ်

တူတော့မတူပါဘူး

သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ ကျတော်တို့ အပေါ်က ကုဒ်ကို run ပြီးတော့စမ်းကြည့်တဲ့အခါမှာ

တခုထူးခြားတာကိုမြင်ရပါလိမ့်မယ်

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

ကျတော်တို့ပုံမှန်အတိုင်းစာရိုက်သလိုရိုက်လို့ရနေတာကိုပါပဲ

ပြီးတော့ အောက်မှာရှိတဲ့ render list ကလည်း အဆင်ပြေပြေနဲ့ UI update လိုက်လုပ်တာကိုမြင်ရမှာပါ

အဲမှာ သူက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ ခုနက ပြောခဲ့တဲ့ debounce တို့ throttle တို့ လိုမျိုး

သူက ui update ကို ခနလေး စောင့်ကြည့်တာပါ

ပြောချင်တာက သူက list render ui ကို update မလုပ်သေးခင်မှာ state ရဲ့ update ကိုစောင့်ကြည့်နေပါတယ်

state က ထပ်ပြီးတော့ update မဖြစ်တော့တဲ့အချိန်မှာသူက အဲဒီ final update ကို ပဲ ယူပေးလိုက်တာပါ

ခုနက debounce တို့ က ကျတော့ သူတို့က ခနလေးစောင့်ပြီးတော့မှအကုန်လုံးကို အလုပ်လုပ်စေတာပါ

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

final state ကိုပဲ ယူပြီးတော့ update လုပ်လိုက်တာပါ

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

import { useState, memo, useDeferredValue, useEffect } from 'react'

function App () {
const [ text, setText ] = useState("")
const deferredText = useDeferredValue(text)
useEffect(() => {
console.log("This is update for state : ", text)
console.log("This is update for deferred : " , deferredText)
console.log("--------end of render-----------")
}, [deferredText, text])

return ( <>
        <input value={text} onChange={ e => setText(e.target.value) } />
        <Listing text={deferredText} />
        </>
    )
}

export default App

memo(function Listing ({ text }) {
let render = [] 
        for(let i = 0 ; i < 10000 ; i++){
        render.push(<div key={i}> input : { text } </div>)
        }
        return ( <> { render } </> )
})

ကျတော်တို့ ဒီလိုလေးထည့်ပြီးတော့ input မှာ စာရိုက်ကြည့်လိုက်ရင် ကျတော်တို့ ဒီလိုလေးမြင်ရပါလိမ့်မယ်

ဒီလောက်ဆိုရင် useDeferredValue Hook ကို နားလည်သွားမယ်လို့ထင်ပါတယ်