State vs props comparison in React - Quick Revision & Key Differences

Recall & Review

beginner

What is state in React?

State is a way to store data inside a component that can change over time. It controls the component's behavior and appearance. When state changes, the component updates its output.

beginner

What are props in React?

Props are inputs passed from a parent component to a child component. They are read-only and cannot be changed by the child component.

beginner

Can a component change its own props?

No, a component cannot change its own props. Props are controlled by the parent component and are read-only inside the child.

intermediate

When should you use state instead of props?

Use state when you need to keep track of data that changes inside the component, like user input or toggles. Use props to pass fixed or external data from parent to child.

beginner

How does changing state affect a React component?

Changing state causes the component to re-render, updating what the user sees. This makes the UI dynamic and interactive.

Which of the following can a React component modify directly?

A Neither state nor props

B Props

C State

D Both state and props

A component can modify its own state but cannot change its props, which come from the parent.

Props in React are:

A Immutable data passed from parent to child

B Mutable data owned by the component

C Used to store local component data

D Changed by the child component

Props are immutable inputs passed from parent to child components.

What happens when a component's state changes?

A The component unmounts

B The component re-renders

C Props are updated

D Nothing changes visually

State changes trigger a re-render to update the UI.

Which is true about props?

A They are used to pass data down from parent to child

B They can be changed by the component receiving them

C They store temporary data inside a component

D They cause the component to re-render when changed internally

Props pass data from parent to child and are read-only in the child.

When should you use state in a React component?

A To hold data passed from a parent

B To pass data to child components

C To make props read-only

D To store data that changes over time inside the component

State is for data that changes inside the component and affects rendering.

Explain the difference between state and props in React.

Think about who controls the data and if it can change inside the component.

Describe a real-life example where you would use state and another where you would use props in a React app.

Imagine a form input for state and a label showing a name for props.