Introduction to State and Core Mental Models
Explore how state acts as React's memory for components, enabling dynamic user interfaces. Understand the difference between state and variables, and learn to properly update state using the useState hook and functional updates to ensure accurate rendering and avoid common bugs.
When we begin working with React, one idea quietly shapes everything we build: state. It is not just a feature or a Hook. It is the mechanism that allows our UI to evolve. We can think of a state as React’s memory for a component. It is the place where values live that are expected to change over time and influence what gets rendered on the screen.
A component without a state is static. It renders the same output every time because nothing inside it changes. As soon as we introduce a state, the component becomes dynamic. Now it can respond to user input, network responses, timers, and any evolving data. ...