useRef Hook

အဲဒါက ဘာလည်းဆိုတော့ useRef ဆိုတဲ့ hook လေးပါ အဲဒါက ဘယ်လိုမျိုး အလုပ်လုပ်တာလည်းဆိုတော့

ကျတော်တို့က တချို့ component တွေရဲ့ data တွေကို state နဲ့ ယူတဲ့အခါမှာ ကျတော်တို့ရဲ့ component တွေက

ခနခန rerender လုပ်နေတာကိုမြင်ရပါမယ် ဗျ

အဲလိုမျိုး ခနခန ဖြစ်တာက ကျတော်တို့ small application ( project ) တွေမှာ မသိသာပေမယ့်

အရမ်းအရမ်းကြီးတဲ့ project တွေ ဖြစ်လာတဲ့အခါကျရင် သူက တော်တော်လေး performance

ကို ထိခိုက်လာစေ ပါတယ်အဲအတွက်ကြောင့်တချို့သောအရာတွေကို ကျတော်တို့ရဲ့ react က နေပြီးတော့

state လိုမျိုး data ကို ယူပေးနိုင်တဲ့ hook လေး တခုကို ထုတ်ပေးလိုက်ပါတယ် အဲဒါက useRefလေးပါပဲ

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

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

import { useRef } from 'react'

function UseRefHook(){
    const ref = useRef(0)
    return(
        <div>
            <h1>Count - {ref.current}</h1>
            <button>Add</button>
        </div>
    )
}
export default UseRefHook

အရင်ဆုံး component တစ်ခုကို ဒီလိုလေး တည်ဆောက်လိုက်ပါမယ်

ဒီအချိန်မှာ ကျတော်တို့သတိထားမိမှာကါ ကျတော်တို့ count value ကို ref.current နဲ့ ခေါ်ထားတာကိုမြင်ရပါ

မယ်ဗျ အဲဒါက ဘာလည်းဆိုတော့ ကျတော်တို့ useRef က သူက object တခုကို return ပြန်ပေးပါတယ်

သူ့ထဲမှာဘာတွေပါတာလည်းဆိုတော့

current ဆိုပြီးတော့ ကျတော်တို့ useRef ရဲ့ parenthesis ထဲမှာ initial value လေးနဲ့ ပြန်ပေးထားတာပါ

အဲဒါကို ကျတော်တို့က button onClick ရဲ့အထဲမှာ function လေးကို ဒီလိုလေးရေးလိုက်ပါမယ်

import { useRef } from 'react'

function UseRefHook(){
    const ref = useRef(0)
    const clickHandler = () =>{
        ref.current += 1
    }    
    return(
        <div>
            <h1>Count - {ref.current}</h1>
            <button onClick={clickHandler}>Add</button>
        </div>
    )
}
export default UseRefHook

တခုသတိထားရမှာက ကျတော်တို့ က useRef လေးကို update လုပ်လိုက်တိုင်းမှာ ကျတော်တို့

က current ကိုပဲ သွားသွားပြီးတော့ update လုပ်ပေးရမှာပါ

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

ဒီမှာ ထူးခြားတာ ဘာတွေ့ရမှာလည်းဆိုတော့ ကျတော်တို့ရဲ့ useRef ရဲ့ data က ပြောင်းလဲသွားပေမယ့်

Browser မှာ 0 ကနေပြီးတော့ ပြောင်းလဲသွားတာကိုမမြင်ရပါဘူး

ကျတော်state မှာတုန်းကလည်းပြောခဲ့ပါတယ်

ကျတော်တို့ပြောင်းလဲမှုကို မြင်စေချင်ရင် state နဲ့ setState ကို အသုံးပြုပေးရမှာပါဆိုပြီးတော့ အဲသဘောအတိုင်းပါပဲ ref က သူက background မှာပဲအလုပ်လုပ်ပေးသွားတာပါ

ဒါဆိုရင် သူကို ကျတော်တို့ rerender လုပ်စေချင်ရင် ဘယ်လိုရေးရမှာလည်းပေါ့

တစ်ကယ် ကျတော်တို့ရဲ့ အဓိက ရည်ရွယ်ချက်ကိုက rerender ကိုမဖြစ်စေချင်လို့ပါ တကယ်လို့ လုပ်ရမယ့်အနေအထား လေးရှိလာခဲ့ရင် state ကိုအသုံးပြုလိုက်တာက ပိုကောင်းပါတယ်

အခုက ကျတော့ ကျတော်က useRef ကိုဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတာကို ပဲလေ့လာရပါသေးတယ်

သူ့ကိုအဓိက ဘယ်မှာအသုံးပြုရတာလည်းဆိုတော့ ကျတော်တို့က input data တွေ မှာ အဓိက အသုံးပြုကြပါတယ်

ဘာလို့ဆိုတော့ ကျတော်တို့ရဲ့ input တွေမှာက onChange လုပ်ရတဲ့အခါ သူက component ကို ခနခန

rerender လုပ်ပေးနေလို့ပါအဲအတွက်ကြောင့် ကျတော်တို့က useRef ကို အသုံးပြုရတာပါ

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

import { useEffect, useRef } from 'react'

function UseRefHook() {
  const inputRef = useRef("")
  const changeHandler = (e) => {
    inputRef.current = e.target.value
    console.log(inputRef.current)
  }
  useEffect(() => {
    console.log("component render")
  }, [])
  return (
    <div>
      <input type="text" ref={inputRef} onChange={changeHandler} 
      placeholder='Enter text' />
    </div>
  )
}

export default UseRefHook

ဒီလိုလေးရေးပြီးတော့ ကျတော်တို့ browser ကို တချက်သွားကြည့်လိုက်ပါမယ်

ဒီလိုလေးမြင်ရပါမယ်

ကျတော်တို့က ဒီထဲမှာစာကိုရိုက်ကြည့်တဲ့အခါမှာ useEffect က အလုပ်မလုပ်တော့ပါဘူး

ဘာဖြစ်လို့လည်းဆိုတော့ useEffect က state update လုပ်တဲ့အခါမှ ပြန်ပြီးတော့အလုပ်လုပ်ပေးတာပါ

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

ကျတော်တို့ useRef ကို လေ့လာပြီးတဲ့အခါမှာ ဘာကို သိသွားရမှာလည်းဆိုတော့ ကျတော်တို့ရဲ့ data တွေကို

user တွေ client တွေကို ပြန်ပြီးတော့ render ပြချင်တဲ့အခါမှာ state ကို အသုံးပြု ရပြီးတော့

data တွေကို client တွေကိုမပြချင်ပဲ နဲ့ နောက်ကွယ်ကနေပြီးတော့အလုပ်လုပ်သွားစေချင်တဲ့အခါမျိုး

ဥပမာ - form handling တွေမှာဆိုရင် useRef ကိုအသုံးပြုပေးရမှာပါ