ReactJS: Props vs State

Developers new to ReactJS seem to get confused as to what the difference between props and state are inside of components. After all, they do both work similarly but there are some differences.

Props aka Properties

The easiest way to think of the role of “props” is to use an example. If you want to put a password field into a form you would do something like the following:

<input type="password" name="password">

The input itself is the component and “type” and “name” are props of the component, they are the equivalent of configuration options provided onload.

As far as the component is concerned they are immutable and can not be changed from the component itself. Meaning you can not change what has already been provided after the fact.

Properties are very similar to HTML attributes. While in some circumstances they can look immutable but have mutable content inside of them, generally they are immutable.

State

This is where you will see the difference. While a component can have default values supplied to it when a component is initialised, this is where things differ from that of props.

A state suffers from mutations usually as a result of a user action, such as a state value that keeps track of whether or not the user has clicked on a button or pressed the enter key twice.

A state is a private snapshot in time of a component that can not be modified by any other component, like a child component. It is private to that one component only. Unlike props which can be passed down to child components from a parent component, state cannot be passed, at least not directly.