What is the difference between props and state?

What is the difference between props and state?

• A. Props are mutable by the component; state is internal.
• B. Props are passed from parent; state is internal and can be changed by the component.
• C. Props are accessed through this.props; state through this.state.
• D. Props come from outside the component and are read-only; state is internal and can be changed by the component.

Answer: (D)

The main idea here is how data is provided to a component and who can change it. In React, props are values that come from a parent component and are read-only inside the child. The child uses those values to render, but it shouldn’t attempt to change them because the parent owns them. State, by contrast, is internal to the component and represents data that can change over time in response to user actions or other events. The component updates its own state using a setter (like setState in class components or the updater from useState in functional components), which triggers a re-render. This distinction matters because it defines the unidirectional data flow: parents provide props to children, while components manage and update their own state. It’s also common to pass state down as props or to pass callbacks to let a child request changes in a parent’s state, but the child itself doesn’t modify the props it receives.

The main idea here is how data is provided to a component and who can change it. In React, props are values that come from a parent component and are read-only inside the child. The child uses those values to render, but it shouldn’t attempt to change them because the parent owns them. State, by contrast, is internal to the component and represents data that can change over time in response to user actions or other events. The component updates its own state using a setter (like setState in class components or the updater from useState in functional components), which triggers a re-render.

This distinction matters because it defines the unidirectional data flow: parents provide props to children, while components manage and update their own state. It’s also common to pass state down as props or to pass callbacks to let a child request changes in a parent’s state, but the child itself doesn’t modify the props it receives.