skillhub-088-vercel-react-best-practices/rules/async-cheap-condition-before-await.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
在异步标记前检查廉价条件	高	当同步守卫已失败时，避免不必要的异步工作	async, await, feature-flags, short-circuit, conditional

在异步标记前检查廉价条件

当一个分支使用了 await 来获取某个标记（flag）或远程值，并且同时需要满足一个廉价的同步条件（本地 props、请求元数据、已加载的状态）时，应当先评估那个廉价条件。否则，即便复合条件永远不可能为真，你仍然要为异步调用付出代价。

这是 延迟 Await 至需要时 在 flag && cheapCondition 类型检查中的一种特化应用。

错误写法：

const someFlag = await getFlag()

if (someFlag && someCondition) {
  // ...
}

正确写法：

if (someCondition) {
  const someFlag = await getFlag()
  if (someFlag) {
    // ...
  }
}

当 getFlag 涉及网络请求、特性标记服务、React.cache 或数据库操作时，这一点尤为重要：当 someCondition 为 false 时跳过它，就能在冷路径上省去这一开销。

如果 someCondition 本身开销较大、依赖于该标记，或者你必须按固定顺序执行副作用，则保持原来的顺序。