How do you say that state updates are merged?

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.


May 16, 2022
629