Practice: Hooks & Data

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

ဒီ lesson ကတော့ Part 1 ထက် တစ်ဆင့်ခက်ပြီး Intermediate/Advanced chapter မှာ သင်ခဲ့တဲ့ useEffect, useContext, custom hooks, data fetching, React Router concept တွေကို ပေါင်းစပ်အသုံးချစေပါတယ်။ Task တစ်ခုချင်းစီက real-world app တွေမှာ ကြုံရလေ့ရှိတဲ့ pattern တွေ - API ကနေ data ဆွဲယူတာ, theme ကို app တစ်ခုလုံးမှာ share လုပ်တာ, logic ကို custom hook အဖြစ် ထုတ်ခွဲတာ, page ပြောင်းတဲ့အခါ URL param ဖတ်တာ - တို့ကို လက်တွေ့ code ရေးပြီး လေ့ကျင့်ဖို့ ရည်ရွယ်ပါတယ်။ ဒီ task တွေကို ကိုယ်တိုင် ဖြေရင်း Basic chapter concept တွေနဲ့ ဘယ်လို ပေါင်းသုံးရမလဲဆိုတာလည်း ပြန်လေ့ကျင့်ရလိမ့်မယ်။

လေ့ကျင့်ခန်းများ

Task 1: useEffect သုံးပြီး fetch("https://jsonplaceholder.typicode.com/users") ကနေ user list ကို ဆွဲယူပြီး loading state နဲ့ list ကို render လုပ်ပါ။ Task 2: ThemeContext (light/dark) တစ်ခု createContext နဲ့ ဆောက်ပြီး, nested component နှစ်ဆင့်ကနေ useContext နဲ့ theme value ကို ဖတ်နိုင်အောင် ချိတ်ပါ။ Task 3: useToggle(initialValue) ဆိုတဲ့ custom hook ဆောက်ပါ - value နဲ့ toggle function ပြန်ပေးရမယ် (modal open/close, sidebar show/hide စတာတွေမှာ သုံးလို့ရအောင်)။ Task 4: react-router-dom သုံးပြီး /users/:id route တစ်ခု ဆောက်ပြီး useParams နဲ့ id ကို ဖတ်ပြီး screen ပေါ်မှာ ပြပါ။

• useEffect ထဲမှာ fetch call လုပ်ပြီး loading/data state ကို မှန်ကန်စွာ handle လုပ်နိုင်ပြီ
• Context Provider/Consumer pattern ကို component နှစ်ဆင့်ကျော်ပြီး အသုံးချနိုင်ပြီ
• custom hook တစ်ခု ကိုယ်တိုင်ဆောက်ပြီး component နှစ်ခုမှာ share လုပ်နိုင်ပြီ

Code နမူနာ

// Task 1 starter - UserList.jsx
import { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  // TODO: fetch users inside useEffect, then setUsers + setLoading(false)

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

// Task 3 starter - useToggle.js
import { useState } from "react";

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  // TODO: return [value, toggle] where toggle flips the boolean
}

export default useToggle;

// Task 4 starter - UserDetail.jsx (used at route /users/:id)
import { useParams } from "react-router-dom";

function UserDetail() {
  // TODO: read id with useParams and display it
  return <h3>User Detail</h3>;
}

export default UserDetail;

Task 4 ခုစလုံးပြီးရင် API data ကနေ user list ပေါ်လာမယ်၊ theme context က nested component ထိ ရောက်နေမယ်၊ toggle hook က component ၂ခုမှာ share ဖြစ်နေမယ်၊ URL param အလိုက် user detail ပြောင်းပြပါလိမ့်မယ်။