useEffect & Side Effects

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

useEffect(callback, dependencyArray) ရဲ့ dependency array က effect ကို 'ဘယ်အချိန် ထပ်run ရမလဲ' ဆိုတာ ထိန်းချုပ်ပါတယ် — [] (empty) ဆိုရင် mount ချိန်တစ်ခါပဲ run, [value] ဆိုရင် value ပြောင်းတိုင်း run, dependency array လုံးဝမပါရင် render တိုင်း run ပါတယ် (အန္တရာယ်ရှိနိုင်)။ Cleanup function (useEffect ထဲက return () => {...}) ကို component unmount ချိန် ဒါမှမဟုတ် dependency ပြောင်းခင် run ပေးပါတယ် — timer clear, subscription cancel လုပ်ဖို့ အသုံးဝင်ပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Search screen တစ်ခုမှာ searchQuery state ပြောင်းတိုင်း API call ချက်ချင်း run ရင် (debounce မရှိဘဲ) keystroke တိုင်း request ပို့သွားနိုင်ပါတယ် — setTimeout နဲ့ debounce implement လုပ်ပြီး, cleanup function ထဲမှာ clearTimeout လုပ်ရင် user ရိုက်နေဆဲအချိန်မှာ unnecessary request တွေကို ကာကွယ်နိုင်ပါတယ်။

Dependency array [] = mount တစ်ခါပဲ, [value] = value ပြောင်းတိုင်း
Cleanup function (return () => {}) = unmount/re-run ခင် clear
Debounce pattern = unnecessary API call ကို လျှော့ချခြင်း

Code နမူနာ

javascript

import { useState, useEffect } from 'react';

function SearchScreen() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;
    const timeoutId = setTimeout(() => {
      fetch(`https://api.example.com/search?q=${query}`)
        .then((res) => res.json())
        .then(setResults);
    }, 500); // 500ms debounce

    return () => clearTimeout(timeoutId); // cleanup — user ဆက်ရိုက်နေရင် timer အဟောင်းကို clear
  }, [query]);

  // ...
}

You should see

User ရိုက်နေချိန် request ချက်ချင်း မပို့ဘဲ ရပ်တန့်ပြီး ၅၀၀ms ကြာမှ (ရိုက်တာ ရပ်ပြီးရင်) API call တစ်ခါပဲ run ဖြစ်မည်။

၅ မိနစ် စမ်းကြည့်

Search screen တစ်ခုကို debounce pattern (setTimeout + cleanup) ဖြင့် ကိုယ်တိုင် implement လုပ်ကြည့်ပါ။

သတိလေးတစ်ချက်

useEffect ထဲမှာ state ကို update ပြီး, အဲဒီ state ကိုပဲ dependency array ထဲ ထည့်ထားရင် infinite loop ဖြစ်နိုင်ပါတယ် — dependency ကို precise/necessary ဖြစ်အောင် ဂရုတစိုက် ရွေးပါ။