Check cheap conditions first

Test the cheap sync guard before you await a flag or remote value.

From vercel-react-best-practices, rule async-cheap-condition-before-await.

Twelve requests, one flag

Send requests. Only admins can see the beta panel.

Await the flag firstBad
    Flag calls
    0
    Avg response
    0 ms
    if (await getFlag() && isAdmin)
    Guard firstGood
      Flag calls
      0
      Avg response
      0 ms
      if (isAdmin && await getFlag())

      if (user.isAdmin) {
  const betaPanel = await getFlag('beta-panel')
  if (betaPanel) {
    return <BetaPanel />
  }
}

      Why it matters, pros and cons

      Why it matters

      If the sync check fails, the awaited value can't change the answer. Skip the call.

      Pros

      • No network call on the common path.
      • Less load on the flag service.
      • A reorder, not a rewrite.

      Cons

      • Keep the order if the check itself is slow.
      • Or if the check depends on the flag.
      • Or if side effects must run in a fixed order.