Fetching Data with API

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

React Native မှာ fetch API က web browser နဲ့ syntax တူတူ ရရှိနိုင်ပါတယ် (built-in) — API call ကို component mount ဖြစ်တဲ့အချိန် တစ်ခါပဲ run ချင်ရင် useEffect(() => { ... }, []) (empty dependency array) ထဲမှာ ထည့်ရေးရပါတယ်။ Loading state (data ရမီအလား ပြသဖို့) နဲ့ error state (fail ရင် ပြသဖို့) ကို useState ၂ ခုနဲ့ ပေါင်းသုံးရင် complete data-fetching pattern ရပါတယ်။

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

API call ကို try/catch ဖြင့် wrap ရမှာက error handling အတွက် အရေးကြီးပါတယ် — network connection မရှိတဲ့အချိန် (mobile user တွေ signal ပျက်တတ်တယ်) fetch က throw လုပ်နိုင်ပါတယ်, catch မလုပ်ရင် app crash ဖြစ်နိုင်ပါတယ်။ ActivityIndicator component (built-in loading spinner) ကို loading state true ချိန်မှာ ပြသပြီး, data ရောက်မှ actual content ကို render ပါတယ်။

• useEffect + fetch = component mount ချိန် API call
• Loading/error state ၂ ခုကို useState ဖြင့် track ခြင်း
• try/catch ဖြင့် network error ကို handle ခြင်း

Code နမူနာ

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, FlatList } from 'react-native';

export default function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

App ဖွင့်ချိန် loading spinner ပေါ်ပြီး, data ရောက်မှ post title list ကို FlatList ဖြင့် ပြသမည်။