What is the difference between React props vs state

A common newbie question for engineers learning React is, “what’s the difference between props and state?” Or googling “React: props vs state”.

I spent hours trying to understand the difference when I first started, and I came to find out that most articles teach it the wrong the way.

Most articles begin with learning what props means first, and React state second. But I think that’s the wrong way to learn what React state and props are and how they work together.

So we’ll start by learning what React state is first.

What is React state?

Let’s begin by defining what is React state.

React state is an object.

React state can be private or public to it’s children components.

React state may hold information that influences the output of a React component.

How does React state work?

The first block of code we see is a simple cat react app. The objective to this cat app is to nail each definition listed above.

Now let’s create our React state.

That’s how easy it was!

But this empty state object is kind of useless until we start adding some data into it.

So we’re going to add a new property (not React component props) to that state object, and will add a couple of JavaScript events to handle adding a new cat name.

Okay, this got complicated real quick! But I’ll break it down for you really easily.

First, our state object has 2 new properties.

nameOfNewCat, will hold the new name for your cat as you’re typing.

cats, is another new property that will hold a list of your cats names.

In our render() method, I’ve added a input tag, and I’ve bind 2 actions to the button, and input tag.

This is important for you to note, because each action (handleChange, and handleAddCatClick) is modifying the state object.

I will breakdown the handleChange action so you may understand how to modify state the right way.

Notice how we’re using setState.

This is an appropriate method of modifying any property in a React state object when it doesn’t rely on previous data.

In traditional JavaScript, you would typically modify the object directly. But that’s a big no no in practice.

This is because modifying the state directly may create a situation where those modifications may get overwritten and cause inconsistency in the app.

setState, does not modify directly but creates a pending state transition.

Another important thing to note is when you’re updating your React state tree, it only modifies the first level of properties.

Huh??

Look at the example below to see what I mean.

How to update nested state state properties in React

Do you remember when I said passing an object in setState was okay in certain situations?

Passing an object in setState might not be the ideal solution for nested objects that rely on previous data.

P.S. the example below is not part of the cat app we’re working on.

Okay, in this React state object we have properties such as name, and likes.

likes is another object with properties cats, and dogs.

This state object is describing a persons name and whether that person likes cats and dogs. Pretty easy.

I am then executing React setState to change the value of the name to my name.

In that example I am passing an object in setState. This is okay because the property, name, does not depend on the previous value.

Which was an empty string.

Now I’m a fan of dogs, but I want to change the value of cats. Cats are funny memes but I do not like them.

Let’s take a look at how I change that data.

The example above has 2 big problems!

Remember that likes is an object with 2 properties.

You might think that only targeting a specific property in state object will be the only property to change. But you’re wrong if you think that.

As shown above, if we update the likes for cats to false only, you’ll see that the state object will remove our like for dogs. And we all love dogs!

You can target a specific property only in the first depth level of your React state object.

If you have nested object in your React state, you must make sure to reference the old data by using ES6 spread operator or ES5 Array.assign method.

The second big problem is that this method doesn’t provide reliable reference to the previous data.

That’s because React setState is creates a asynchronous action to update the component state.

So if you call multiple setState calls during the same cycle, it may be batched together making the end result unknown!

React setState actually accepts another type of argument, a function.

P.S. when you pass only an object it’s called a shallow merger.

Woah! This looks different from the last 2 examples show before.

The function above only gets executed after the action has been executed, and guarantees to be up-to-date state data.

React state influencing the output

We’ve discussed about what React state is and how to add, and update React state data.

Your next question might be, “how do we display the data we’ve saved in state?”

This is done really easily.

In our cat app, we just need to grab the cats property from your React state object and render some markup for each cat.

In the image above you will be looping through each cat using the .map() array method to create a new li tag that outputs the name of the cat we’ve entered.

The output should look something like this.

So far we’ve built a React cat application that utilizes state to save, and display data.

Now we must understand how React props plays nicely with state.

What is React props?

Let’s begin by defining what a React prop is.

React props are inputs that describe what we should see.

Above is an example of a plain a text field, and I have inserted an input of type to equal text.

And if I add another input named placeholder, it will make my input field look different to the user.

inputs equal props.

It works the same way with React components. Let’s take a look.

How to pass state as props in React

In the same file, you can create a new React component called Cat. Cat will expect a prop called name.

You will now update the code in the CatApp component where you’re displaying the list of cat names.

All you’re doing here is passing the cat name that we’ve stored in our state object, and passing it as a prop to the Cat component you’ve created.

The Cat component will then display the input name, and display the name in a list item HTML tag.

Conclusion

Understanding React state, and props may seem challenging and some what confusing.

But learning it the right order may help you understand it quicker and better.

State is an object that contains private or public local data about a component. And it may be used to influence the output of a component.

Props are nothing more than input definitions to describe what you are suppose to see.

I like to tweet about React and post helpful code snippets. Follow me there if you would like some too!