State and Hooks in ReactJS

To make your app dynamic and responsive, you need to store data—like the list of tasks or what the user types. This is done using React’s useState hook.

Here’s how it looks in your code:

const [todos, setTodos] = useState([]);

const [inputValue, setInputValue] = useState("");

What this means:

• todos: an array storing all your tasks
• inputValue: a string tracking what the user types

The setTodos() and setInputValue() functions are used to update the state. When these are called, React re-renders the component, showing the updated data on screen.

For example:

setTodos([...todos, { text: inputValue, completed: false }])

• This adds a new task to the list.
• The UI refreshes automatically, showing the new task.

Hooks like useState allow React to remember data between renders—without needing a backend or database.