Hook Call Order Matters

5 mins read • Jan 16, 2024

ပထမဆုံးအနေနဲ့ ပြောချင်တာက ကျွန်တော့်ရဲ Portfolio website ထဲမှာ blogs feature ထပ်ပြီးဖြည့်စွက်ထားတာမို့ ပထမဆုံးအကြိမ် စမ်းသပ်ရေးသားတာပါ။ အဲ့ဒါကြောင့် နားလည်မှု လွဲမှားနေတာတွေပါခဲ့ရင် အားမနာတမ်း ဝေဖန်ထောက်ပြပေးလို့ရပါတယ်။ ကျွန်တော်ပြောသွားမယ့် အကြောင်းအရာတော်တော်များများက React ရဲ့ official documentaiton ထဲကနေ သတိထားသင့်ပြီး အသုံးဝင်တဲ့အရာတွေကို ကောက်နှုတ်ဖော်ပြပေးတာပါ။

ကျွန်တော်ပြောပြချင်တဲ့ အကြောင်းအရာတွေကတော့ -

Hook call order matters
React isolate states based on their place in the UI tree
Resetting state with key props

တို့ဘဲဖြစ်ပါတယ်။

ကျွန်တော်အခုပြောမှာကတော့ Hook call order matters ဆိုတဲ့အကြောင်းပါ။ ကျန်တဲ့အကြောင်းအရာနှစ်ခုကတော့ နောက်မှ အလျဉ်းသင့်သလို ရေးသွားဖို့ စိတ်ကူးရှိပါတယ်။

ကျွန်တော်တို့ class နဲ့ရေးလို့ရတဲ့ class component အပြင် function တွေကို အသုံးပြုပြီး function component တွေတည်ဆောက်လို့ရလာတဲ့နောက်ပိုင်း hook တွေပါ သုံးလို့ရလာတယ်ပေါ့။ Hook တွေသုံးလို့ရလာတဲ့နောက်ပိုင်း React application တွေကို ဖန်တီးရတာဟာ class component တွေနဲ့ ရေးရတာထက် ပိုပြီးရိုးရှင်းလွယ်ကူလာပါတယ်။ ဒါပေမယ့် Hook တွေသုံးတဲ့နေရာမှာ သိထားသင့်တဲ့ rule တွေရှိပါတယ်။ အဲ့ဒါကတော့

Always call hooks at the top level of your function component.

Always call hooks at the top level of another Hook

ပါ။ ဆိုလိုချင်တာက component body အတွင်းနဲ့ custom hook ဆိုရင်လည်း custom hook ရဲ့ body အတွင်းတိုက်ရိုက်အနေအထားမှာသာ hook တွေကို အသုံးပြုဖို့ တိုက်တွန်းထားတာပါ။ control flow တွေဖြစ်တဲ့ conditional statement တွေ loop တွေ၊ နောက် nested function အစရှိတဲ့ code block တွေအတွင်းမှာ အသုံးမပြုသင့်ပါဘူး။ နောက် conditional return statement တွေရဲ့အောက်မှာ အစရှိသဖြင့်ပေါ့။

For example:

import { useState } from 'react';

const Person = () => {
  const [name, setName] = useState("Mg Mg");
  const [age, setAge] = useState(12);

  if(age < 18) return <div>You are young</div>

  const [gender, setGender] = useState("male");

  // ...
};

အပေါ်က code မှာဆို gender state ရဲ့ Hook က conditional return statement ရဲ့အောက်မှာ ရှိနေတဲ့အတွက် Hook rules တွေကို violate လုပ်သလိုဖြစ်နေပါလိမ့်မယ်။ ဘာလို့ အဲ့လိုကန့်သတ်ချက်တွေရှိနေတာလဲပေါ့။ React က Hook တွေကို implement လုပ်ခဲ့ရာမှာ call order ကို အခြေခံခဲ့လို့ပါဘဲ။

Call order အကြောင်းပြောရာမှာ useState Hook နဲ့ဘဲအဓိကဆွေးနွေးသွားပါမယ်။ React က function component တွေကို အကြိမ်ကြိမ် render လုပ်ရာမှာ previous render က state value တွေကို လက်ရှိ current render မှာ ဘယ်လိုမှတ်မိနေလဲဆိုတာ တွေးမိကြလားဗျ။ တကယ်တော့ React က behind the scenes မှာ state value တွေကို multiple render process တွေကြားမှာ retain လုပ်နိုင်ဖို့အတွက် သင့်တော်ရာ data structure ကိုအသုံးပြုပြီး မှတ်သားထားရပါတယ် (ဒီနေရာမှာ သတိချပ်ရမှာက မှတ်သားထားတယ်လို့ ဆိုရာမှာ state အတွက်တင် မဟုတ်ဘဲ အခြားသော Hook အမျိုးအစားတွေအတွက်လည်း ပါဝင်ပါသေးတယ်။ ဘယ်အချိန်မှာ ဘယ် Hook ပြီးရင် ဘယ် Hook ခေါ်ထားလဲဆိုတာတွေအတွက်လည်း မှတ်သားရသေးတဲ့အတွက်ကြောင့်ပါ။ ဘယ် data structure ကိုသုံးလဲဆိုတာကိုတော့ တပ်အပ်မသိပါဘူး။ Linked list ကိုသုံးပြီး အနည်းငယ်ရှင်းပြထားတဲ့ article တစ်ခုတွေ့ထားပါတယ်။ ဒီမှာ ဖတ်ကြည့်လို့ရပါတယ်)

import { useState } from 'react';

const Person = () => {
  const [name, setName] = useState("Mg Mg");    // 0
  const [age, setAge] = useState(12);           // 1
  const [gender, setGender] = useState("male"); // 2

  // ...
};

အပေါ်က Person component မှာဆို name, age, gender ဆိုပြီး state သုံးခုရှိတယ်ဆိုရင် React က Hook call order အလိုက် state တွေကို မှတ်သားပါတယ်။ array ကို သုံးပြီးရှင်းပြကြည့်ပါမယ်။ (array data structure ကိုသုံးတယ်လို့ဆိုလိုခြင်းမဟုတ်ပါ၊ ရှင်းလို့လွယ်အောင်သာ array သုံးပြတာပါ။ useState hook တစ်ခုစီမှာ သူတို့ရဲ့ သက်ဆိုင်ရာ state setter function တွေနဲ့ associate လုပ်စရာတွေရှိသေးတဲ့အတွက် ကျွန်တော်အောက်မှာ ဆက်ပြောသွားသလို မရိုးရှင်းပါဘူး။ ကျွန်တော်ပြောသွားမယ့် အကြောင်းအရာတွေထဲမှာ state တွေကို ဘယ်လို update လုပ်သွားလဲဆိုတဲ့ အကြောင်းအရာတွေမပါဝင်ပါဘူး။ useState Hook တစ်ခုချင်းစီက သူတို့ရဲ့ သက်ဆိုင်ရာ value တွေကို ဘယ်လိုရယူသွားသလဲဆိုတာကို ဉပမာအနေနဲ့ပြတာပါ)

အပေါ်က Hook call order အလိုက်ဆိုရင် ["Mg Mg", 12, "male"] ဆိုပြီး Person component ရဲ့ state တွေကို ပထမဆုံး မှတ်သားထားတယ် ဆိုပါစို့။ နောက်တခါ component re-render လုပ်ချိန် useState hook တွေကိုခေါ်တဲ့အခါမှာ ဒီ array ထဲက value တွေကိုဘဲ call order အလိုက် access လုပ်ပါတယ်။ ပထမဆုံး useState call ဆိုရင် array index 0 ကို access လုပ်မယ်။ array index 0 နေရာမှာ "Mg Mg" ဆိုတဲ့ value ရှိနေတဲ့အတွက် name ဆိုတဲ့ state variable ရဲ့ value က "Mg Mg" ဖြစ်နေမှာပါ။ အဲ့ဒီလိုဘဲ ကျန်နေတဲ့ useState call နှစ်ခုအတွက်လည်း call index အလိုက် value တွေကို ‌access လုပ်ပြီး return ပြန်ပေးပါတယ်။ အဲ့လိုနဲ့ သူတို့နဲ့ သက်ဆိုင်ရာ value တွေကို ရရှိစေပါတယ်။

ဥပမာနောက်တစ်ခုနဲ့ ကြည့်မယ်ဆိုရင်

import { useState } from 'react';

const Person = () => {
  // Initializing state for 'age' with an initial value of 12
  const [age, setAge] = useState(12);

  // The following block won't be executed if the age is greater than or equal to 18
  if (age < 18) {
    // Initializing state for 'gender' with an initial value of 'male'
    const [gender, setGender] = useState("male");
  }

  // Warning: The value of the 'name' variable will be set to the intended value for the 'gender' state if the age is greater than or equal to 18
  const [name, setName] = useState("Mg Mg");

  // ...
};

export default Person;

ဒီမှာဆို ပထမဆုံး အကြိမ် component render လုပ်တဲ့အခါမှာ age ရဲ့ value က 12 ဖြစ်နေတဲ့အတွက်gender state အတွက် useState("male") ဆိုတာက အလုပ်လုပ်နေမှာပါ။ React က နောက်ကွယ်မှာ [12, "male", "Mg Mg"] ဆိုပြီး သိမ်းသွားတယ်လို့ မှတ်ယူကြည့်ရအောင်ပါ။ နောက်တခါ state update ဖြစ်လို့ component render လုပ်တဲ့အခါ age ရဲ့ တန်ဖိုးက 18 ထက်ကြီးသွားရင် လိုချင်တဲ့ပုံစံအတိုင်းရတော့မှာ မဟုတ်ပါဘူး။ ခုနက ပြောခဲ့သလို Hook call order အလိုက် state value တွေကို ပြန်ယူတဲ့အခါ gender state အတွက် useState call က မရှိတော့တဲ့အတွက် Hook call order က အစဉ်လိုက်မဖြစ်တော့ဘဲ name ဆိုတဲ့ state ရဲ့ value က gender state အတွက်ရည်ရွယ်ထားတဲ့ value ဖြစ်နေပြီး သက်ဆိုင်ရာ value တွေမရတော့ဘဲ မလိုလားအပ်တဲ့ ပြဿနာတွေဖြစ်ကုန်မှာပါ။ ဒါကတော့ hook call order matters ဆိုတဲ့အကြောင်းပါ။

မှတ်ချက်။ အခြား useEffect တို့ useMemo တို့လို Hook တွေလည်းရှိသေးတဲ့အတွက် ဒီထက်ပိုပြီးရှုပ်ထွေးပါတယ်။ ဘာလို့ call order က အရေးကြီးလဲဆိုတာ ရှင်းရှင်းလင်းလင်းမြင်သာစေချင်တဲ့ ရည်ရွယ်ချက်နဲ့သာ အရိုးရှင်းဆုံးဖြစ်အောင် ရေးထားတာပါ။ ပြင်ဆင်ဖြည့်စွက်ချင်တာ ရှိခဲ့ရင် comment လုပ်ခဲ့ပါ။ အဆုံးထိ ဖတ်ပေးတဲ့အတွက် ကျေးဇူးပါ 🥰

You might want to know

React hooks: not magic, just arrays (Should read)
Hook call order explanation
Rules of Hook
Why do hooks rely on call order

# React# Hooks