Okay, maybe blasphemy is a bit of a harsh word; but seriously, avoid setting
props at all cost if you can in React components!
When I started out with React, I made this mistake countless times, and like the noob that I was
and still probably am, I decided to I to set state as props that were passed through to the component and declared myself a “genius” for doing so… Oh how I wish I could go back and slap myself in the face.
Let’s take a step back and define what
Props are short for properties. These are static properties on a React component that are immutable (cannot be changed).
State is mutable, and defines at any given time, the current state of the React component that is being rendered.
Thats the key right there, Immutable vs. Mutable. Because
state if mutable, it is passed down to child components as
props which are immutable.
This ensures that the only way for the child component to render something different or change is if the state of the parent component has changed; causing a rerender of all the child components whom have inherited it’s state through props. This is the central idea of React’s unidirectional data flow.
Here are two examples:
The difference between the first and the second example is that when the
this.state.age on the parent of the
ChildComponent changes, the second example will rerender. This is because the new age prop is being used in the render function, causing the
ChildComponent to rerender.
However, the first example will NOT rerender unless the component is unmounted and remounted again; because
state is only ever set when the component initially mounts.
It was groundbreaking for me when I finally realized why I shouldn’t be setting
props, and I hoped this helped you come to a similar realization and dancing around in your room feeling.