useEffect Hook

`useEffect` သည် component render ပြီးနောက် side effect လုပ်ရန်သုံးတဲ့ hook ပါ။ Side effect ဆိုတာ React render calculation အပြင်ဘက်ကအလုပ်တွေ—API ခေါ်ခြင်း၊ browser title ပြောင်းခြင်း၊ timer ထောင်ခြင်း၊ event listener ချိတ်ခြင်း—တွေကိုဆိုလိုပါတယ်။

import { useEffect, useState } from 'react';

function TitleChanger() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = 'You clicked ' + count + ' times';
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click to change title ({count})
    </button>
  );
}

`count` ပြောင်းတဲ့အခါတိုင်း `useEffect` ထဲက code run ဖြစ်ပြီး browser tab title ကို update လုပ်ပါတယ်။ Dependency array ထဲမှာ `[count]` ထည့်ထားလို့ count ပြောင်းမှ run ဖြစ်ပါတယ်။

Button ကိုနှိပ်တိုင်း UI count တိုးပြီး browser tab title လည်း `You clicked 1 times` စသဖြင့်ပြောင်းသွားမယ်။