Introduction to State Management with Hooks

In an interactive app, components need to manage changing data – for example, the current weight and height inputs, and the calculated BMI result. State in React refers to data that can change over time and influence what is displayed on the UI.

We use the useState Hook to add state to functional components. The useState hook allows us to create state variables and update them as needed.

Managing form input state and the result with useState ensures that our UI stays in sync with the user’s actions. (Under the hood, when the state is updated via the provided setter function, React knows to re-render the component with the new state value.)