Question

How do you say that state updates are merged in ReactJS, give example?

Answer 1

When you call setState() in the component, React merges the object you provide into the current state.

For example, let us take a facebook user with posts and comments details as state variables,

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

Now you can update them independently with separate setState() calls as below,

 componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

As mentioned in the above code snippets, this.setState({comments}) updates only comments variable without modifying or replacing posts variable.