Reports

This is a simple demo of React setState and render，shows how React merge updates.

let batchTaskCount = 0;
function startRender() {
  batchTaskCount--;
  if (batchTaskCount === 0) {
    console.log('render');
  }
}
function setState() {
  batchTaskCount++;
  Promise.resolve().then(() => {
    startRender();
  });
}
function handleClick1() {
  setState();
  Promise.resolve().then(() => {
    setState();
  });
}
function handleClick2() {
  Promise.resolve().then(() => {
    setState();
  });
  setState();
}

handleClick1 render twice, handleClick2 render once.

setState will put a render task into the microTask queue.

When render task runs, it will check if there are any other render tasks that have not been merged.

In handleClick1, setState2 put a render task into the microTask queue after the render task of setState1, so it will render twice.

79254162