Ever since we started using React to rebuild our UI at uberVU (now Hootsuite) the #1 developer question has probably been:
What’s the exact difference between props and state?
It’s fairly easy to understand how they work—especially when seen in context—but it’s also a bit difficult to grasp them conceptually. It’s confusing at first because they both have abstract terms and their values look the same, but they also have very different roles.
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, so we need to zoom in and see what each data type represents and where does it come from.
Because we also use Cosmos where props can contain an initial state, getting this straight is crucial.
Before separating props and state, let’s also identify where they overlap.
tl;dr: If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.
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.
state is optional. Since state increases complexity and reduces predictability, a Component without state is preferable. Even though you clearly can’t do without state in an interactive app, you should avoid having too many Stateful Components.
render()
function and all their logic revolves around the props they receive. This makes them very easy to follow (and test for that matter). We sometimes call these dumb-as-f*ck Components (which turns out to be the only way to misuse the F-word in the English language).#react #javascript #developer