State vs Props
The two fundamental parts to getting started with React. They are important to know and important to know how to use. As a beginner myself coming through a coding bootcamp, I found these a little confusing at first, especially coming from Ruby and Javascript.
Let’s start with Props (which is short for properties).
Props give us the ability to pass values into our Components. This can be any sort of value, whether an object or string, array etc. It allows us to make our data a lot more reusable as we have the ability to make our components far more dynamic. But React has a very strict rule. A Component should NEVER modify its own props and should act like pure functions.
React apps are made up of many Components, some of which rely on data from their parents, or rely on data being passed back up via a function from a child Component.
If you aren’t too sure what a Component is. The React docs themselves give a fantastic (obviously) answer. ‘Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.’
https://reactjs.org/docs/components-and-props.html — if you want to read further.
Components refer to other Components in their code allowing us to create more concise, well written code for each part of our project we are building.
State is data that CAN be mutated in your Component, for example a counter. Essentially allowing Components to create and manage their own data.
State can be referred to anywhere within the Component it is created by using the ‘this.state.propertyName’ syntax. However, to pass it to other Components you must pass it via props. State can only be set in class Components. You can set state like below:
For props, if you had a simple constant such as:
Here, we are able to pass as props, our foodType to our Food Component. This ends up being cleaner code, especially for when you are writing it for an array.
Another great part of props is you can create default props. This allows the Component to have a fallback prop in case something is omitted or undefined. You can simply write a default prop at the bottom of the class or function!
This way if a poster image is not present, the Component will still render something.
For State, you should never modify the state directly! You can modify it instead using a method called setState().
Firstly React Components are rendered based on the data in the state, so when this data changes, the specific part of the DOM holding that Component re-renders. The setState() method notifies React that it has changed and the Component needs to be re-rendered and what needs to change.
The reason why we set the initial state is because the constructor method behind State runs first when a component is made, the render runs slightly later! If you want to know more about this checkout this interesting article on the Component Lifecycle.
State setsState asynchronously. Do not rely on their values for calculating the next state.
When this code executes setState will not block the rest of the code until it has finished its process. It simply allows the Component to know that it needs to be updated. Both these console logs will come up with the same number: 0.
State increases complexity and reduces predictability, less Components with state is preferable. Here is a table I found that I thought was very helpful in the beginning of my React learning life.
The complexity surrounding state and how to manipulate it, is something saved for the next blog as there are plenty of ways to get it right! And, as I found plenty of ways to get it wrong!
