What is the exact difference between props and state? It’s fairly easy to understand how they work, especially when viewed in context, but conceptually they’re also a bit difficult. It’s confusing at first because they both have abstract terms and their values look the same, but they also have different roles. This article is simultaneously published on my blog: 👉xueshiming.cn

What does setState actually do?

SetState () schedules an update to a component’s state object. When state changes, the component is re-rendered.

What is the difference between state and props?

Props (short for “properties”) and state are common JavaScript objects. Both are used to store information that controls the rendering output of the component, and they differ in several important ways:

  • Props is passed to the component (similar to function parameters), while state is managed by the component itself within the component (similar to variables declared within a function).

  • Props are not modifiable, and all React components must protect their props from being changed like pure functions. Because props are passed in, and they cannot be changed, we can treat any React component that uses only props as a pureComponent, that is, it will always render the same output given the same input.

  • State is created in the component and is typically initialized in Constructor

  • State is mutable and modifiable, and setState is updated asynchronously each time.

Why did setState give me an incorrect value?

In React, this.props and this.state both stand for rendered values, which are displayed on the current screen.

Calling setState is actually asynchronous — don’t expect this.state to map to the new value immediately after calling setState. If you need to calculate the new value based on the current state, you should pass a function instead of an object (see below).

Examples of code not working as expected:

incrementCount() {// Note: this * does not * work as expected. this.setState({count: this.state.count + 1}); }handleSomething() {// assume 'this.state.count' starts at 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // When React re-renders the component, 'this.state.count' will change to 1 instead of 3 as you'd expect. // This is because the 'incrementCount()' function above reads data from 'this.state.count', // but React will not update 'this.state.count' until the component is re-rendered. // So eventually 'incrementCount()' is 0 every time it reads' this.state.count 'and sets it to 1. // See the instructions below to fix the problem. }Copy the code

So how do you update states that depend on the current state?

Passing a function to setState instead of an object ensures that each call uses the latest version of state.

What is the difference between passing an object to setState and passing a function?

Passing a function allows you to access the current state value within the function. Because setState calls are batched, you can chain-update them and make sure they are built on top of each other so they don’t clash:

incrementCount() {this.setState((state) => {// Important: read 'state' when updating, not 'this.state'.return {count: state.count + 1}
  });
}

handleSomething() {// assume 'this.state.count' starts at 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // If you read 'this.state.count' from here now, it will still be 0. // However, when React re-renders the component, it will change to 3. }Copy the code

When is setState asynchronous?

Currently, setState inside event handlers is asynchronous. (V16.10)

For example, if Parent and Child both call setState in the same click event, this ensures that the Child will not be rerendered twice. Instead, React will wait until the browser event ends and then update the state uniformly. This mechanism can provide great performance gains in large applications.