Props vs State in React

I had been working with React and Redux on a project for a while before being asked what the difference between props and state were in React. I realized at that point that while I felt comfortable working with both, I couldn’t clearly articulate the differences between them. So, I’ve set out to both clarify the differences for myself and perhaps help others do the same.

The general overview is that props are variables passed from a parent component to a child component with a read-only intent. State, on the other hand, is comprised of variables that are initialized and updated directly by the component. State rather than props is used whenever a component will be updating the data.

MORE ON PROPS

Props can be passed from a parent component inside of the rendering of the child component, as seen below. This example is passing a method and a string property down to the child component.

Passing a method down from the parent component allows you to centralize the managing of state, so your app can be composed mostly of stateless, easier to manage, functional components.

The above example is also passing a string down to the child component to keep it simple, but this could as easily, and likely more commonly, be a piece of dynamic data handed down to the child.

From the perspective of the child element, all props passed from the parent component will be collected into a single props object. The way they are accessed within a child element depends on whether you have a functional or class component.

Below is a simple functional component using props handed down by the parent component. You can think of the props like any argument handed to a function.

Props are read-only. They are not intended to be changed directly from the child component. However, they can be used to set an initial state that IS expected to change dynamically.

For that, we will use a class component for the child.

MORE ON STATE

Prior to the addition of hooks to React, which this post is not using, class components needed to be used to control state, because they have additional features of local state and lifecycle methods that functional components don’t have access to. Below is an example of a class child component that uses a constructor and super to inherit these react component additional features.

In a class method, the props given to it by the parent component are accessed by using this.props instead of props as with the above functional component. In this case, we are using the props to set an initial state in the constructor, which will only run on the first render of this component.

Any changes to the state will need to use this.setState as seen in the example, which will trigger a re-render of the component to show the update.

It is important to remember that setState is an asynchronous action, so if you are adding a number, or doing something relative to the current state, you will need to pass the prevState first argument to setState, to be sure you know what the current value of your state is that you are changing.

For more detail, check out Components and Props and State and Lifecycle from the React documentation, or the How to pass props to components in React blog post by Robin Wieruch.

Learn about Using the useState Hook for State Management in React.

I am forever improving. If you have corrections or feedback, I would be happy to learn and make fixes. Thank you!