为何这段替代React.useEffect的代码无法正常运行？

你的代码无法正常运行，核心问题出在这几个点：

1. 渲染阶段直接更新状态违反React规则
   组件函数体属于React的渲染阶段，在这个阶段调用setIsLoggedIn会直接触发重新渲染，打乱React的正常渲染流程，引发不可预测的行为，哪怕用counter限制执行次数，这种写法本身就不符合React的设计规范。

2. 全局counter存在逻辑缺陷

   • 这个counter是全局变量，若组件被多次实例化，多个实例会共享同一个counter值，导致后续实例无法正确初始化状态。
   • 当组件卸载后重新挂载时，counter不会自动重置为0，就算localStorage里的登录状态仍有效，也不会再执行setIsLoggedIn(true)，不符合业务预期。

3. 缺少返回的JSX元素
   React组件必须返回一个React元素（或null），你的组件没有任何返回内容，这会直接触发报错，是代码无法运行的直接原因之一。

应该用React.useEffect处理这类初始化逻辑，它专门用于处理组件副作用（比如读取本地存储、更新状态），还能通过依赖项控制执行时机：

import React from 'react';

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  React.useEffect(() => {
    const loginStatus = localStorage.getItem('loginStatus');
    if (loginStatus === 'Logged In') {
      setIsLoggedIn(true);
    }
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  // 必须返回JSX内容
  return (
    <div>
      {isLoggedIn ? <p>已登录</p> : <p>未登录</p>}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Tashif Iqbal