What the props? Or is it State?
So your learning React and now your learning about things called props and state. Understanding these two things are crucial to your ability to become fluent with React. In this blog I will explain props and state. I will also clarify some of the key differences between them.
What are props?
Props is short for properties. We use props to pass data or functions from a parent component to a child component. This flow only goes one-way. It’s also important to remember that props are read-only because they are immutable objects once sent to the child component. Props can be complex functions or something simple like a single piece of data. Generally you will see props being passed as a parameter using the keyword “props”. Props allow us to make child components reusable and dynamic rather than having to hard code them.
It helped me to think of props the way I think of arguments to a function. This really helps me remember the purpose of props which is that they are representing some piece of data. React uses this data to display what you see on your browser page.
When we are passing props we can use different sets of data to produce something with a standardized design. Think of online shopping and all of the listings you see when you search for an item(Amazon, Target, Walmart, etc.). They all look the same(displaying the same exact set of item details for every listing that is showing) but the details of each item are different. We can think of each item as the prop and the item display as the component that the items’ data is being passed to.
What is State?
State is a way to handle and manage data inside a component. Whereas props are immutable, State allows us to make changes to the data inside the component of that state. State does have the ability to be passed to child components but it will be passed as “props” because any changes to that state must occur in the component which holds that state. Those changes get re-rendered and sent down as new props which updates the browser page.
An example of this would be when you’re doing some online shopping and the quantity changes while you are shopping. This has happened because the “State” of the quantity has changed somewhere else in the program and then was passed to the component which allows the end user to view the current quantity. This allows the application to be more dynamic — who wants to try and buy an item that is out of stock???
What are the differences between props and state?
-Where do they get their inherent information from?
A big difference between state and props is that state is handled in the component that it is created in. It can also be updated inside that component. Props though are handled outside the component and must be updated outside of the component that is displaying them. Props are displayed in child components and passed from parent components.
-Mutability vs. Immutability
- As mentioned above — Props are read-only and cannot be changed or modified in the child component. State on the other hand can be updated in the component it was created.
-Scope
- State is considered to be local to a component meaning it can only be accessed or modified in the component it was created. In order to access properties of state in other components that state must be passed down as a prop. This is because props can be passed through the component hierarchy through the practice of “prop drilling”. It is important to remember that props can only be passed from parent to child so it is necessary to create State at the highest level that it will need to be accessed.
-Reason for use
- Props allow you to make components in a dynamic way. Component behavior can be structured to respond dynamically to the props that are passed to it. This allows components to be more reusable across an application. State is used to manage data in the component which it was created. This makes pages dynamic and interactive.
If you’re more of a visual learner here’s an image to highlight some of the key differences:
Conclusion
Props and state are both very important when it comes to building in React but each has their own use. These are two powerful tools that are the important in every React App. I hope this overview has been useful for you.
Resources: