为什么我的组件渲染计数两次？

我的父布局组件：

function MainPage() {
    return(
        <div>
            <MLayout children={<MNavbar custOrFalse={false} />} />
        </div>
    );
}

export default MainPage;

我的子导航栏组件：

 const Navbar = ({...props},{children}) => {

    const [grid, makeGrid] = useState(false); //whatever is inside the parenthesis is the starting value
    const [publish, makePublish] = useState(false);
    const [research, makeResearch] = useState(false);
    const [custOrFalse, makeCustToggle] = useState(props.custOrFalse);
    const [custCount,setCount] = useState(0);
   

    function CustToggle(){
      makeCustToggle(prevVal=>!prevVal); //useState is an async function, so need to use the previous value.
    }

    //can set this navbar to be cust based or not
    var custButton='cust page'
    if ( custOrFalse===true ) {
      custButton='cust login' 
    };
    var countFirst = (custCount == 0);
    console.log(countFirst)

    // useEffect(()=>{
    //   console.log(custCount);
    // },[custOrFalse]);
    console.log(custCount);

    return (
      <div>
          <nav className = {`${styles.page__menu} ${styles.page__custom_settings} ${styles.menu}`} >
            <ul className = {`${styles.menu__list} ${styles.r_list}`} >
                <CustomNavButtonLeft navbutton='the grid'         />
                <CustomNavButtonLeft navbutton='publish'          />
                <CustomNavButtonLeft navbutton='research'         />
                <CustomNavButtonRight navbutton={custButton} onClick={CustToggle,()=> setCount(custCount + 1)}  />
            </ul>
          </nav>
          {custOrFalse&&<Registration/>}
          {countFirst&&!custOrFalse&&<DLogin/>}
      </div>
      );
  };


export default Navbar;

我试图让导航栏上的按钮在文本之间切换以及在它呈现的组件之间切换 - 但是第一次渲染没有显示我尚未创建的组件，因此实际上什么都不显示。

当我运行此代码时，控制台日志显示：

true
0
false

我的印象是它会简单地显示true，但由于某种原因，一旦呈现组件似乎就会进行计数？

根据我所了解的研究，useEffect 是一个异步函数 - 但我不确定这如何影响这里的流程

更新以显示添加计数器后，切换将停止工作