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.

rulesadvanced-init-once.md

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

Initialize App Once, Not Per Mount

Do not put app-wide initialization that must run once per app load inside useEffect([]) of a component. Components can remount and effects will re-run. Use a module-level guard or top-level init in the entry module instead.

Incorrect (runs twice in dev, re-runs on remount):

function Comp() {
  useEffect(() => {
    loadFromStorage()
    checkAuthToken()
  }, [])

  // ...
}

Correct (once per app load):

let didInit = false

function Comp() {
  useEffect(() => {
    if (didInit) return
    didInit = true
    loadFromStorage()
    checkAuthToken()
  }, [])

  // ...
}

Reference: Initializing the application

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