Back to Plate

Check Cheap Conditions Before Async Flags

.agents/skills/vercel-react-best-practices/rules/async-cheap-condition-before-await.md

53.0.5998 B
Original Source

Check Cheap Conditions Before Async Flags

When a branch uses await for a flag or remote value and also requires a cheap synchronous condition (local props, request metadata, already-loaded state), evaluate the cheap condition first. Otherwise you pay for the async call even when the compound condition can never be true.

This is a specialization of Defer Await Until Needed for flag && cheapCondition style checks.

Incorrect:

typescript
const someFlag = await getFlag()

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

Correct:

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

This matters when getFlag hits the network, a feature-flag service, or React.cache / DB work: skipping it when someCondition is false removes that cost on the cold path.

Keep the original order if someCondition is expensive, depends on the flag, or you must run side effects in a fixed order.