useTodos.ts

1 todo

-Add an `editTodo` function for inline text editingL39

Annotations (2)

@gitianuseTodos hook — encapsulates all todo CRUD operations and localStorage persistence. Returns a stable API that the App component consumes without needing to know about storage details.L6

useTodos hook — encapsulates all todo CRUD operations and localStorage persistence. Returns a stable API that the App component consumes without needing to know about storage details.

typescriptL11–16

11 export function useTodos() {
12   const [todos, setTodos] = useState<Todo[]>(() => {
13     const stored = localStorage.getItem(STORAGE_KEY);
14     return stored ? JSON.parse(stored) : [];
15   });
16

@gitianPersistence sync — writes to localStorage on every state changeL17

Persistence sync — writes to localStorage on every state change

typescriptL18–20

18   useEffect(() => {
19     localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
20   }, [todos]);

11	export function useTodos() {
12	const [todos, setTodos] = useState<Todo[]>(() => {
13	const stored = localStorage.getItem(STORAGE_KEY);
14	return stored ? JSON.parse(stored) : [];
15	});
16

18	useEffect(() => {
19	localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
20	}, [todos]);