React useState设置相同的值，为什么会render两

const [value, setValue] = React.useState(0);

  const onClick = () => {
    setValue(1);
  };

  console.log(`render`, value);

  return (
    // <div onClick={onClick}>click {Math.random()}</div>
    <div onClick={onClick}>click</div>
  );

首先我们来看这段代码，value的初始值是0，点击按钮将该值设置成1。首先这段代码会打印出// render 0 ; 随后我们点击按钮两次。输出结果如下：

// render 0
// render 1
// render 1

看到上边的结果是不是很意外，当我们第一次点击按钮的时候 value的值已经变成了1， 第二次点击按钮的时候将value的值还是设置成1， 那么前后的值是不是没有变化，理论上来讲是不是不应该打印出 render 1。

针对这个问题研究了很久，知道我在官网上仔细的看到了这句话

image.png
需要注意的是，React 可能仍需要在跳过渲染前渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。

那么我试了一下给DOM中添加了个随机数，发现确实是在第二次点击的时候随机数并没有变化。说明确实是没有再一次的触发re-render