setState trong React

Khi bạn gọi setState ở trong một component, điều gì đã xảy ra?

import React from "react";
import ReactDOM from "react-dom";

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ clicked: true });
  }
  render() {
    if (this.state.clicked) {
      return <h1>Thanks</h1>;
    }
    return <button onClick={this.handleClick}>Click me!</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById("container"));

Chắc bạn cũng biết rằng React sẽ re-renders lại components thay đổi state { clicked: true } cập nhật DOM và return ra <h1>Thanks</h1>. Có vẻ dễ nhưng... thế React làm điều đó hay React DOM?

Cập nhật DOM nghe có vẻ như React DOM sẽ thực hiện điều trên nhưng rất tiếc là không phải