Props vs State in React

When I started Learning to react I always had a problem with differentiating these two and what each one of them exactly does.

In a React component, props are variables passed to it by its parent component. State on the other hand is still variables but directly initialized and managed by the component.

The state can be initialized by props.

Let's take a closer look at each one of them now.

State

Like props, state holds information about the component. However, the kind of information and how it is handled is different.

By default, a component has no state. The Welcome component from above is stateless:

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

So when would you use state?

When a component needs to keep track of information between renderings the component itself can create, update, and use state.

We’ll be working with a fairly simple component to see working in action. We’ve got a button that keeps track of how many times you’ve clicked it.

I know, but here’s the code:

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

You can play with this code on CodePen.

Props

What does “props” even mean?

To get the jargon out of the way, “props” is short for “properties” so nothing particularly fancy there.

Well, all right then. What makes props special?

props are passed into the component

Here’s an example:

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}const element = <Welcome name="Sara" />;

You can play with this on CodePen.

The line <Welcome name="Sara" /> creates a property name with value "Sara".

That sounds kinda like a function call…

Yep, the property is passed to the component, similar to how an argument is passed to a function. In fact, we could even rewrite the component to be simpler:

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

Now the “props as arguments” comparison are even clearer.

OK, so props “come from above.”

Often, but not always. A component can also have default props, so if a prop isn’t passed through it can still be set.

We can make the name property optional by adding defaultProps to the Welcome class:

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}Welcome.defaultProps = {
  name: "world",
};

If Welcome is called without a name it will simply render <h1> Hello world</h1>.

So props can come from the parent, or can be set by the component itself.

Conclusion

While props and state both hold information relating to the component, they are used differently and should be kept separate.

props contains the information set by the parent component (although defaults can be set) and should not be changed.

state contains “private” information for the component to initialize, change, and use on its own.