Mini Project Part 2: Todo App — State & Persistence

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

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

Todo array ကို useState([]) ဖြင့် state အဖြစ် ပြောင်းလဲပြီး, addTodo/toggleTodo/deleteTodo ဆိုတဲ့ function သုံးခုကို ရေးပါမယ် — addTodo က array ကို spread operator ([...todos, newTodo]) ဖြင့် immutably ထပ်ထည့်, toggleTodo က .map() ဖြင့် target item ရဲ့ done ကိုပဲ flip, deleteTodo က .filter() ဖြင့် target id ကို ဖယ်ထုတ်ပါတယ်။ Todo array ပြောင်းတိုင်း useEffect ဖြင့် AsyncStorage ထဲ auto-save လုပ်ရင် app ပိတ်ပြီးပြန်ဖွင့်တိုင်း data ကျန်ရှိနေပါလိမ့်မယ်။

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

App mount ချိန် useEffect(() => { loadTodos() }, []) ဖြင့် AsyncStorage ကနေ todo list ကို အရင် load လုပ်ပါ။ Todo array ပြောင်းတိုင်း (deps: [todos]) ထပ် useEffect ဖြင့် AsyncStorage.setItem ကို auto-save လုပ်ပါ — ဒီနေရာမှာ initial load ကို save effect က ထပ်ရေးမိမလား (infinite loop) သတိထားရပါမယ် (loading state flag ဖြင့် ကွက်ကွက်ခွဲထားရင် ကောင်းပါတယ်)။

addTodo/toggleTodo/deleteTodo — function သုံးခု immutable pattern ဖြင့် ရေးခြင်း
AsyncStorage load (mount ချိန်) + save (todos ပြောင်းတိုင်း) ချိတ်ဆက်ခြင်း
Loading flag ဖြင့် initial-load vs user-edit save ကို ခွဲခြားခြင်း

Code နမူနာ

javascript

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function useTodos() {
  const [todos, setTodos] = useState([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    AsyncStorage.getItem('todos').then((json) => {
      if (json) setTodos(JSON.parse(json));
      setLoaded(true);
    });
  }, []);

  useEffect(() => {
    if (loaded) AsyncStorage.setItem('todos', JSON.stringify(todos));
  }, [todos, loaded]);

  const addTodo = (text) =>
    setTodos([...todos, { id: Date.now().toString(), text, done: false }]);
  const toggleTodo = (id) =>
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  const deleteTodo = (id) => setTodos(todos.filter((t) => t.id !== id));

  return { todos, addTodo, toggleTodo, deleteTodo };
}

You should see

Todo item ကို ထည့်/tick/ဖျက်ပြီးရင် app ကို ပိတ်ပြီးပြန်ဖွင့်လည်း data ကျန်ရှိနေမည်။

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

Part 1 ရဲ့ UI ထဲမှာ useTodos hook ကို ချိတ်ဆက်ပြီး Add button press → addTodo, checkbox press → toggleTodo ကို implement လုပ်ကြည့်ပါ။

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

State ကို directly mutate (todos.push(newTodo)) လုပ်ရင် React က change ကို detect မလုပ်နိုင်ဘဲ re-render မဖြစ်နိုင်ပါဘူး — အမြဲ new array/object ဖန်တီးပြီးမှ setTodos ခေါ်ပါ။