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.

rulesserver-parallel-nested-fetching.md

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

Parallel Nested Data Fetching

When fetching nested data in parallel, chain dependent fetches within each item's promise so a slow item doesn't block the rest.

Incorrect (a single slow item blocks all nested fetches):

const chats = await Promise.all(
  chatIds.map(id => getChat(id))
)

const chatAuthors = await Promise.all(
  chats.map(chat => getUser(chat.author))
)

If one getChat(id) out of 100 is extremely slow, the authors of the other 99 chats can't start loading even though their data is ready.

Correct (each item chains its own nested fetch):

const chatAuthors = await Promise.all(
  chatIds.map(id => getChat(id).then(chat => getUser(chat.author)))
)

Each item independently chains getChat → getUser, so a slow chat doesn't block author fetches for the others.

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