Refs, DOM Access & Imperative Escape Hatches

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Refs, DOM Access & Imperative Escape Hatches ရဲ့ render, state နဲ့ interaction behavior ကိုရှင်းပြနိုင်ရန်

Loading, error, accessibility နဲ့ lifecycle cases စမ်းနိုင်ရန်

Maintainable, testable နဲ့ performant React code ရေးနိုင်ရန်

Refs, DOM Access & Imperative Escape Hatches ကို React ပြင်ပ system တစ်ခုနှင့် synchronize လုပ်ရန် escape hatch အဖြစ်သုံးပါ။ Setup/cleanup symmetry, dependency correctness, race cancellation နဲ့ Strict Mode တွင်ပြန် run သောအခြေအနေကိုစမ်းပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Refs, DOM Access & Imperative Escape Hatches example ကို empty/loading/error states, keyboard-only interaction, slow network, rapid repeated events နဲ့ component unmount/remount cases ဖြင့်စမ်းပါ။ Browser console, React DevTools, tests နဲ့ profiler ကိုလိုအပ်သလိုအသုံးပြုပြီး behavior ကိုအတည်ပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

Source of truth နဲ့ component boundary ကိုရှင်းပြနိုင်ခြင်း
Keyboard နှင့် failure state ပါသော example ရေးနိုင်ခြင်း
User-visible behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

jsx

import { useRef } from 'react';

export default function SearchBox() {
  const inputRef = useRef(null);
  return <>
    <input ref={inputRef} aria-label="Search tasks" />
    <button onClick={() => inputRef.current?.focus()}>Focus search</button>
  </>;
}

You should see

Button နှိပ်လျှင် keyboard focus က search input သို့ရွှေ့မည်။

ကိုယ်တိုင်စမ်းကြည့်ရန်

State/Effect သတိပေးချက်

Happy path တစ်ခု render မှန်ရုံဖြင့် stale state, repeated effects, accessibility, loading နဲ့ error paths အားလုံးမှန်ပြီဟုယူဆခြင်း။

Manipulating the DOM with Refs — React