When building a React application, two key concepts to understand are state and props. State and props are both used to store and pass data between components, but they serve different purposes and have different properties.
In this article, we will take a deep dive into React state vs props, exploring the similarities and differences between these two important concepts. We will explain how to use state and props effectively in a React application, and provide examples of where each one can be useful.
We will also use the state hook rather than class components. Instead of defining the state in the constructor and using setState() to update the state, we will call useState() in our functional component to declare a state variable and update function.
Similarities between state and props
While state and props have different use cases and properties, there are a few key similarities between the two.
State and props both store data
The first is that both state and props are used to store and pass data between components. Components often need to share data with one another, and both state and props are tools for achieving this.
State and props can be passed to child components
Another similarity is that both state and props can be passed down to child components. Components are often structured as a hierarchy, with parent components passing down data to child components through props. Similarly, state can be used to store data within a component and then passed down to child components using props.
State and props both trigger re-renders
Lastly, when the value of state or props changes, React will automatically trigger a re-render of the component to update the UI with the new value. This means that both state and props can be used to update the UI and reflect changes in the underlying data.
Differences between state and props
While there are a few similarities between state and props, there are many differences. Understanding these differences can help you make better decisions on when to use one over the other.
State is managed within a component, props are passed down
The first difference is that state is managed within a component, while props are passed down from a parent component to a child component. State is a way for a component to manage its own internal data, while props are a way for a parent component to pass data down to its children.
Let’s look at an example with a greeting and name. The greeting is a state managed by the component, which can update the state by calling setGreeting(). The name prop, on the other hand, is passed down when calling the component.
State can be updated, props are read-only and immutable
Similar to the point above, component state can be updated, but props are read-only and immutable in the context of the component. In the above example, the greeting state can be updated by calling setGreeting().
Read-only and immutable have similar implications, but have slightly different meanings. Read-only means that the component cannot modify the prop that it receives, it can only be read. Immutable, on the other hand, means the prop value cannot be changed. If a parent component wants to change the value of a prop, it needs to create a new prop with a new value and pass it down to the child component. This is because under the hood, React relies on the immutability of props to determine whether a component needs to re-render or not.
State is private to a component, props can be read by any component that receives them
State is private to the component that owns it, and only that component can modify it. A component’s state cannot be accessed or modified by other components from outside the component. However, props are used to pass down data from a parent component to a child component. A child component cannot modify its props directly, but it can read them and use them to render its UI or perform certain actions.
State changes are asynchronous, prop changes are synchronous
When a component’s state changes, React schedules a re-render of the component and its children. However, this re-render may be batched with other updates for performance reasons, and state changes may not take effect immediately. However, when a parent component passes new props down to its child components, React immediately triggers a re-render of the child components. This re-render is typically synchronous and takes effect immediately.
There are some scenarios where prop changes may also trigger asynchronous re-renders. For example, if a parent component’s render method is triggered by an asynchronous event (such as a network request), the prop changes may also appear to be asynchronous. However, from the perspective of the child component, any prop changes are synchronous.
To illustrate the asynchronous nature of state changes, we can look at the example below. We will update the greeting example from above to include a name change and console.log() the result of name and greeting.
When you click on the “Update Name” button, the console outputs the updated name. However, when you click on the “Say Goodbye” button, the console outputs greeting: Hello. This shows that even though we called setGreeting() to update greeting, the change is asynchronous and has not yet updated when we call console.log().
Examples of when to use state vs props
Now that we have covered the similarities and differences between state and props, let’s look at a few practical examples of when to use state vs props.
Using state in a checkbox component
The checkbox component below is a great example of when to use state rather than props.
The checkbox component takes in a number of props, but manages its checked state internally. Since the checked state is more relevant to the checkbox component and the parent component does not need to control it, it is more appropriate to let the checkbox component manage its own state. However, the parent component can still receive updates on the checked state through the onChange() function.
Using props in a list component
A list component is a good example of when to use props. In the example below, the list component receives a list of items as a prop and displays them in a <ul> element.
Using state to generate list items would not be suitable in this case. A generic list component does not have knowledge of the parent component’s usage of the list component or the application logic. Instead, it is more appropriate to let the parent component determine the implementation of the list component through props.
Using state and props in a checkbox component
In the checkbox component example above, we will make one small change to show how we can set the initial checked state by using props, but allowing the checked state to still be controlled internally by the component.
We now pass in a prop called initialChecked, which is either true or false. On initial render, this will set the checked state of the checkbox. Any subsequent changes are managed by the component. This is how we can combine props and state to create a truly dynamic component.
Conclusion
In this deep dive on React state vs props, we covered many examples and use cases for each concept. I hope you’ve gained a better understanding of when to use state and when to use props, and how to apply these concepts in your React projects. By utilizing state and props effectively, you can create more efficient and robust components that provide a better user experience. Thanks for reading, and happy React development!