• • 此问题在此处已有答案**：

Why is my React component is rendering twice?（8个答案）
昨天关门了。
在以下App.js的最小工作示例中：

import { useState, useEffect } from "react";

export default function App() {
  const [isShown, setIsShown] = useState(true);
  return (
    <>
      <button onClick = {() => setIsShown(!isShown)}>
        {isShown? 'Hide Counter' : 'Show Counter'}
      </button>
      {isShown? <Counter /> : null}
    </>
  );
}

function Counter(){
  const [count, setCount] = useState(0);
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log('render');
  });
  
  useEffect(() => {
      console.log('mounted');
    }, []);
  return (
    <div className="counter">
      <button onClick={() =>setBool(!bool)}>Re-Render</button>
      <button onClick={() =>setCount(count + 1)}>Increment</button>
      <p> Count: {count}</p>
    </div>
  );
}

我得到两组控制台日志（即消息"render"和"mounted"显示两次）每当我刷新页面或当我点击"隐藏计数器"，然后点击"显示计数器"。我的期望是"render"和"show"应该只显示一次。在当前的情况下，这似乎意味着组件在每次页面加载时呈现两次。我在Firefox和Chrome上测试过，发现两者都有相同的行为。
为什么会这样？我如何开始调试它？