State vs Props

When I started learning about State and Props in React, I was very confused at first. I find that it is very easy to get mixed up because they both hold information that influences the output of the components render method. From the React documentation: “They are different in one important way: props get passed to the component (similar to function parameters) whereas the state is managed within the component (similar to variables declared within a function).”

We will go into more detail about what that statement from the documentation means by describing what state and props are:

What is State?

State is an object that holds some information that may get updated at a later point in time. Let’s say we have a component called LikeMe that has an onClick event listener on a like button and calls a function that updates the “like'' property of the LikeMe components state. Let's take a look at a simple example:

class LikeMe extends React.Component {
  state = {
    like: 0
  }

  onClick = () => {
    this.setState({
      like: this.state.like + 1
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.like}</h1>
        <button onClick={this.onClick}>Like</button>
        <p>Its has been {this.state.like} times liked</p>
      </div>
    );
  }

Above we have a class component named LikeMe that has a state property of “like” and it is initially set to 0. We always initialize state in the constructor, however, in our case we don’t have a constructor function but it achieves the same goal as:

constructor(props) {
  super(props)
  state = { like: 0 }
}

We can update the state by using setState only. It is never a good practice to update the state directly to the state unless you are setting it as a default value. Now there is one big difference between state and props: Props can not be mutated but the state can be mutated using setState.

In the above example, we have an arrow function onClick that has this.setState object, which is taking the current state and incrementing it by one each time the user clicks a heart button. Don’t forget to bind this, if you are using a function declaration instead of an arrow function.

What are Props?

Props are short for Properties and allow us to pass values into our components.They give us the opportunity to make our components more dynamic, and more reusable. It is not managed by component and read-only. Let's create 2 different functions and see how props are passed to different components:

const App = () => {
   return <div><Intro firstName={“Uma”} /></div>
}

Here we have an App component that returns a div which has an Intro component nested inside of the div. Notice also that we are setting firstName={“Uma”}. We just created our very first props called firstName. Now let’s create an Intro component:

const Intro = props => {
   console.log(props)
   return <div> My name is {props.firstName} </div>
}

In this component, we are passing props into the Intro function and if you were to console.log(props), you should see Object {firstName: “Uma”} in the console, from our App component. To get access to firstName props we simply write props.firstName and it will display in the browser. Now if you pass the other props lastName={“Manandhar”} in the App component, you should be able to see both props displayed in the console like: Object {firstName: ”Uma”, lastName: ”Manandhar”}. You can pass as many props as you want and you can also make a copy of the Intro component and pass different values to the new Intro components props object and get different outputs.

const App = () => {
   return (
      <div>
        <Intro firstName={“Uma”} />
        <Intro firstName={“Umesh”} />
      </div>
    )
}

Will output:

My name is Uma
My name is Umesh

Pretty amazing right?

State is handled in the component and updated inside the component but props are handled outside the component. If you have a function which just displays some jsx and never updates anything then you can use props. We use props because we don’t want to render the same jsx like firstName from the above example. By using props it's more dynamic and reusable. On the other hand, if we have a component like LikeMe which updates every time a user clicks on the button then we use state.

I hope this helps at least a little bit to understand the difference between state and props. Thank you