Component State

Component state is data owned by a UI component that may change during the component's lifetime. Updating that state tells the UI framework that the component may need to render again with the new value.

Component state represents information that belongs to a particular component and can change as the user interacts with the interface. Examples include whether a menu is open, the current value of an input, or a selected tab.

In React, state is commonly created with the `useState` Hook. The Hook returns the current state value and a setter function. Calling the setter schedules an update so React can render the component using the new state.

State should be changed through the mechanism provided by the framework rather than by directly mutating the stored value. For example, with React, assigning directly to a state variable does not tell React that it should update the UI; the setter should be used instead.

State is different from ordinary local variables. A local variable is recreated when the component function runs, while React state persists between renders. State is therefore appropriate for values that must survive a render and affect what the component displays.

A component should generally keep state as local as possible when only that component needs it. If multiple components need to coordinate around the same changing value, the state may need to be moved to a common parent or managed through another shared-state mechanism.

Key points

• State is data owned by a component that can change over time.
• React state persists across renders, unlike ordinary local variables.
• Use the state setter to update React state rather than directly mutating the value.
• A state update can cause the component to render again with updated data.
• Keep state local when only one component needs it; lift it when related components must share it.

Interview questions

What is component state, and why would you use it?

Component state is data that a component owns and that can change while the application is running. In React, state is useful when a changing value affects what the component renders. Examples include a counter value, selected option, or whether a panel is open. State persists between renders, unlike a normal variable declared inside the component function.

Why shouldn't you directly modify a React state variable?

React needs to be informed that state has changed so it can schedule the component for another render. Directly assigning to a state variable does not provide that notification. The state setter returned by `useState` should be used instead. This also keeps updates consistent with React's state management model.

What is the difference between state and props?

Props are inputs supplied to a component by its parent, whereas state is data managed by the component itself. Props are commonly used to configure or provide information to a component. State is appropriate for information that the component needs to change over time. A parent can also own state and pass its current value and callbacks to a child through props.

Why does a normal local variable not replace component state?

A normal variable inside a function component is recreated whenever the component function runs. Its value therefore does not provide persistent storage across renders. React state is retained between renders and can trigger another render when updated through its setter. For UI data that must survive renders, state is therefore the appropriate mechanism.

When should state be lifted to a parent component?

State should generally be lifted when multiple related components need to read or modify the same changing value. The common parent can become the owner of that state and pass the necessary values and callbacks to its children. This creates a shared source of truth rather than maintaining separate, potentially inconsistent copies. If only one component needs the value, keeping the state local is usually simpler.