State and Props in React

When learning React, it is important to understand the difference between two of the most important concepts you’ll be using: state and props. These two ideas can be confusing to grasp at first but it is important to learn early on since they will play a big role in your React applications.

Background:

In order to understand state and props, you first must know what components are in React. A component is just a javascript object that can be written as either a function or a class. When the task of that component is to simply render information to the page, it is best to write the component as functional or presentational. If you write a component as a class, you must include the render method and a return statement. When writing a component as a class that inherits from React Component, it now is able to have a state.

State:

If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state. When the component is first mounted its state has an initial value, which will then mutate. These mutations are mostly generated from user events from event listeners. States need to equate to an object with key(s).

State written example

If you need to execute any code before you are setting the initial state of your component, you must use a constructor method such as that which is shown to the left.

When is it appropriate to use state in a component? It is important to realize that not all components will have state. If a change needs to happen inside of a component and no parent component above it needs to know about the change, it probably needs to have state.

When state needs to change, you never want to mutate it directly especially if the key in state points to an array or object because arrays and objects are passed by reference. If you are assigning state in a location other than in the initial state, you will need to use the setState() method. When changing the array or object, which can be the value of the key, you will have to make a copy of the original state, change the copy, and then set the copy equal to the new state. If you don’t make a copy, the component won’t notice the change. It is important to use setState() and not just this.state because setState will always trigger a re render of your page. The setState method can take an optional callback function that can be ran after setState takes place.

Even though you clearly can’t do without state in an interactive app, you should avoid having too many Stateful Components. When reading the code for a stateful component, you have to work a lot harder, mentally, to keep track of everything that’s going on and you must be very conscious of every time you add state to a component. It can become confusing quickly especially when first learning React.

Props:

What is a prop? A prop (short for property) is information passed from a parent component to a child component as an attribute. They are received from above and immutable as far as the Component receiving them is concerned.

When should we use a prop? We would use a prop if we have a piece of information that needs to be passed to another component. Be as specific as possible with your prop names since they can be passed down multiple times and consistency in naming is crucial. This is because the component that receives the props can not change the props. A component cannot change its props, but it is responsible for putting together the props of its child components. Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure functions with respect to their props meaning that they always produce the same value.

Similarities and Differences:

You can pass state of a component as props to a child. Both props and state are plain JavaScript objects. Both props and state changes trigger a render update.

Both props and state are deterministic. If your component generates different outputs for the same combination of props and state then you’re doing something wrong.

A component manages its own state internally, but — besides setting an initial state — has no business fiddling with the state of its children.