一、从缓存或外部环境中恢复状态

场景：从 localStorage、sessionStorage、cookie、indexedDB、URL 参数 等来源读取初始值。

const [theme, setTheme] = useState(() => {
  return localStorage.getItem('theme') || 'light';
});

• 避免每次渲染都访问存储，减少 I/O。

---

二、初始化大型数据结构

const [graph, setGraph] = useState(() => {
  return generateGraph(10000); // 生成 1 万节点
});

• 仅首渲染生成一次，减少重复计算开销。

---

三、依赖外部环境变量（Node.js、全局配置等）

const [apiBase] = useState(() => {
  return process.env.NODE_ENV === 'production' ? '/prod' : '/dev';
});

• 避免在每次渲染都读取全局状态。

---

四、根据 props 计算初始状态（但后续不随 props 改变）

场景：只在第一次根据 props 派生 state。

function UserForm({ defaultName }) {
  const [name, setName] = useState(() => defaultName.trim());
  // defaultName 后续变化不会影响 state
}

---

五、生成随机值 / 唯一 ID 初始化

const [sessionId] = useState(() => crypto.randomUUID());

• 保证渲染期间该值稳定，不会每次都变。