How do props and state affect rendering in React?

Explain React rendering, props, and state

Explains how React components render from props and state, and how updates flow through a component tree.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Props are inputs from a parent component, and state is data a component owns across renders. React renders the component function to produce UI from the current props and state. When state changes or a parent passes different props, React renders again and updates the DOM where the output changed. I think of a component as a function of its inputs, with event handlers changing state or calling back to parents.

Full answer below

Practice focus

React mental model, unidirectional data flow, render behavior, local state, parent props, and component updates.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
This is the base mental model behind almost every React interview question. If props, state, and rendering are fuzzy, forms, effects, and performance become guesswork.
Props are inputs from a parent component, and state is data a component owns across renders. React renders the component function to produce UI from the current props and state. When state changes or a parent passes different props, React renders again and updates the DOM where the output changed. I think of a component as a function of its inputs, with event handlers changing state or calling back to parents.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would keep data ownership clear. If a parent owns the value, it passes it as props and receives callbacks for changes. If a value is only used inside one component, local state is fine. I avoid copying props into state unless I have a clear reason, because that creates two sources of truth. Rendering should stay pure: it reads props and state and returns UI, while side effects happen in event handlers or effects.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Mutating state directly instead of setting new state.
Copying props into state by default.
Doing side effects during render.
Treating every render as a DOM rewrite.

How do props and state affect rendering in React?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Tech stacks

Skill areas

Suggest an improvement