Difference between state and props in React

The main responsibility of a Component is to translate raw data into rich HTML. With that in mind, the props and the state together constitute the raw data that the HTML output derives from.

You could say props + state is the input data for the render() function of a Component.

Before separating props and state, let’s also identify where they overlap.

• Both props and state are plain JS objects
• Both props and state changes trigger a render update
• Both props and state are deterministic. If your Component generates different outputs for the same combination of props and state then you’re doing something wrong.

props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned.

A Component cannot change its props, but it is responsible for putting together the props of its child Components.

The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serializable* representation of one point in time — a snapshot.

A Component manages its own state internally, but — besides setting an initial state — has no business fiddling with the state of its children. You could say the state is private.