Managing State with useState

What is State?

State is information a component needs to remember while the application is running. Examples include a counter value, selected tab, form input, or whether a menu is open.

Using useState

The useState Hook gives a component a state value and a setter function.

• The first value is the current state.
• The second value is the function used to update it.
• The initial value is used when the component starts.

Important Rule

Do not directly modify state. Always use the setter function returned by useState.

Functional Updates

When the new state depends on the previous state, use a function such as current => current + 1. This makes the update reliable when multiple updates are queued.