Mini Project Part 2: Todo App — State & Persistence

Let's think about it this way for a moment

We'll turn the todo array into state with useState([]) and write three functions — addTodo, toggleTodo, and deleteTodo. addTodo appends immutably with the spread operator ([...todos, newTodo]), toggleTodo uses .map() to flip just the done field on the target item, and deleteTodo uses .filter() to remove the target id. With a useEffect that auto-saves to AsyncStorage every time the todo array changes, your data will still be there each time you close and reopen the app.

Let's connect it to a real scenario

On app mount, first load the todo list from AsyncStorage with useEffect(() => { loadTodos() }, []). Then use a separate useEffect (deps: [todos]) to auto-save with AsyncStorage.setItem every time the todo array changes. Watch out here — the save effect might end up re-writing right after the initial load and create an infinite loop, so it's best to keep them clearly separated with a loading state flag.

• Write addTodo/toggleTodo/deleteTodo — all three functions using the immutable pattern
• Wire up AsyncStorage load (on mount) + save (whenever todos changes)
• Use a loading flag to distinguish the initial load from a user-triggered save

Code Example

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 };
}

After adding, ticking, or deleting a todo item, the data will still be there when you close and reopen the app.