All skills
siberiacancode avatar

/react-best-practices

@53c8ff5

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

  • 77 files
  • 225.1 KB
  • MIT
  • Updated 4 months ago
  • GitHub

Use this Skill: https://skilld.dev/gh/siberiacancode/agent-skills/react-best-practices

This session only. Nothing lands on disk.

rulesasync-cheap-condition-before-await.md

≈305 tokens on demand. Your agent reads this file only when SKILL.md points to it.

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:

const someFlag = await getFlag()

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

Correct:

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.

Source: SKILL.md on GitHub

No third-party reports yet.

Signed by skilld at 53c8ff5. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated 4 months ago
metadata
{
  "author": "vercel",
  "version": "1.0.0"
}

README badge

README badge for siberiacancode/agent-skills/react-best-practices