Through my journey of learning React, two things have clearly stood out against the crowd as some of the most important concepts to understand. State and Props. What are they? When do you use them? Do you have to always use them?. They are difficult concepts to grasp in the beginning but once understood, make understanding React a whole lot easy.
What are Props and State?
Props (short for properties) are a Component’s configuration. They are received from it’s parent and immutable as far as the Component receiving them is concerned. Props can be values, objects containing values or callback functions.
State is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.
Can Props change State and its own props?
The short and incredibly lazy answer is yes, sort of. The long answer is yes…but through a journey of steps which is too long to put into one sentence so please continue reading. A prop can container a callback function given to it by its parent and defined in the parent, that when trigged, updates the state…in turn changing the props provided to it by its parent. If still confused you can watch a video about it HERE.
How do we change State?
You are able to change State in React through a function which calls a React method this.setState(). This allows you to update the State but not to modify the State directly.
How do we call use a Prop?
Now you have the prop, how do you use the prop? Well there are two ways in which you can call upon a prop.
There are two types of components in React, Class components and Functional components, you can find out more about these two HERE.
Within Class components we use this.props.propName as we are call props on an instance of that particular class.
However, in functional components, we us props.propName, as we are already passing the props as an argument.
Passing Props from parent to child
In React you are able to pass props from parent to child by defining them within the component based within the parent.
Using Props to set State
Now your child has received data from its parent, it can use this data in many ways such as to set the state of itself.
Doing this is fine, especially with data which will not be changing AT ALL. However, this does raise the question, how do you set the state with values which may be changing? (Disclaimer: the following is only used in rare cases).
This is where getDerivedStateFromProps comes into play. You can explore this HERE however, the fact that the official React page has a blog discussing why you most probably won’t need to use it, should say a lot.
There is a whole lot more to learn about props and state and I encourage you to do some more reading on these concepts. Once you understand props and state, React makes so much more sense.