Props vs State: An Introduction
What is state and prop? How do they differ? In what ways are they similar?
These are some popular questions when it comes to learning React. So let’s just dive right in and see if we can’t get this all figured out.
First things first… in order to understand the difference between the two we must first learn where they are similar. Also it’s important that you have an understanding of what a React component is and how it is used.
Just to make sure you’re up to speed.. a component is a reusable piece of code in react that allows you to render some element of a user interface. These are the building blocks of a React application. It allows you to break down a complex user interface or UI into much simpler and smaller pieces which make up the whole of the app. These components are usually defined as function or a class which I have shown below.
If you need some more information on components you can check out this article here.
Similarities
Both props (short for properties) and state are essentially plain old javascript objects. Another key similarity between the two objects is that they can both alter how a render function changes a view or something else on the DOM.
Essentially they are being used to store raw data that can be used as inputs for a component. This allows components to be dynamic in how they render information on the DOM.
Thats about it when it comes to the similarities.. now on to the real reason you’re here..
Differences
The key difference between these two objects lies in how they are used to pass around raw data in React.
Lets start with state ..
State is normally declared inside of a component. It is meant to be mutable.. meaning its expected to change throughout the lifecycle of the application. For example if you have an event listener setup and changes some UI element on user input then this is a perfect time to use the state object.
The component’s state object can be thought of like a local variable for a function. The same way you are not able to access the local variables from one function in another the same goes for components and their states. Check the example below:
So how does one pass information from one component to another? Well with regular JS functions in order to have access to a local variable from another function it must be passed in as a parameter. When it comes to components in React we use props.
An explanation of props..
Props are short for properties and these are similar to a functions parameters. They are meant to be immutable.. meaning they are not meant to be changed once they are set. Props are used to pass information or raw data from a parent component to its child. Using the JSX syntax you pass the prop object by setting the key/value pairs as attributes of the child component. The code example below shows how this is similar to passing in an argument to a regular JS function:
Relation
Props and state can have a relationship to each other only in that you can use a components state as a prop that you pass into a child component. Also, in this child component, you can use those props you pass in then set a state. This can relationship between the two can allow for truly dynamic components.
Conclusion
This is about as deep as we have time to go in this brief introduction. In writing this post I found a plethora of information on these two unique objects. If you are looking for more in-depth detailed explanations of the difference and similarities you can check out the resources below:
React State vs Props explained
Props vs State in React
What is the difference between state and props in React?
react-guide/props-vs-state.md
