How the To-Do List App Works (React + Local Storage)

This To-Do List app is built using React.js with useState and useEffect hooks to manage state and lifecycle methods.

Video:

useState: Manages input text and tasks array.
useEffect:
- On initial load: It retrieves tasks from localStorage.
- On tasks update: It stores the new tasks array back into localStorage.
Local Storage: Keeps tasks persistent even after refreshing the page.
Task Structure: Each task is an object with id, text, and completed properties.
Core Functions:
- addTask(): Adds a task when user types and clicks the button.
- deleteTask(id): Removes the selected task by its ID.
- toggleTaskCompletion(id): Toggles completion status of a task.

This is an ideal beginner project to learn React state management, list rendering, and localStorage integration.

❓ Quiz: Test Your React To-Do App Knowledge

What does useState return?
- A) Only current value
- B) A function to call API
- C) A state variable and a function to update it ✅
- D) None of the above
Which hook is used for side effects like localStorage?
- A) useMemo
- B) useEffect ✅
- C) useRef
- D) useContext
What is the purpose of localStorage.setItem()?
- A) To render components
- B) To store key-value pairs in the browser ✅
- C) To send API requests
- D) To update the DOM
Why is JSON.stringify() used before saving to localStorage?
- A) To parse the object
- B) To convert JavaScript objects into strings ✅
- C) To delete data
- D) To optimize memory
What’s a good use case for using useEffect with a dependency array [tasks]?
- A) Run only once
- B) Run on every keystroke
- C) Run only when tasks state changes ✅
- D) Never run