Understanding State and the useState Hook

Some data in an application changes while the user works with it: the number on a counter, the text in a search box, or whether a menu is open. A component needs to remember that data between renders, and the screen must update whenever the data changes. Data with both of these properties is called state.

Each component owns its own state. A component can read and change its state, and other components can see it only when the owner passes it to them as a prop.

Why a Plain Variable Is Not Enough

Consider a counter with an Increase button