agentsclimarketplace
Sign in

React best practices

Skill aiskillstore/marketplace/skills/vercel-labs/react-best-practices

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.From its SKILL.md

Install
npx -y skills add aiskillstore/marketplace --skill react-best-practices

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

3.5 KB, 723 tokens by cl100k_base, as published. Nobody here has run it

React Best Practices

Overview

Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

  • Writing new React components or Next.js pages
  • Implementing data fetching (client or server-side)
  • Reviewing code for performance issues
  • Refactoring existing React/Next.js code
  • Optimizing bundle size or load times

Priority-Ordered Guidelines

Rules are prioritized by impact:

PriorityCategoryImpact
1Eliminating WaterfallsCRITICAL
2Bundle Size OptimizationCRITICAL
3Server-Side PerformanceHIGH
4Client-Side Data FetchingMEDIUM-HIGH
5Re-render OptimizationMEDIUM
6Rendering PerformanceMEDIUM
7JavaScript PerformanceLOW-MEDIUM
8Advanced PatternsLOW

Quick Reference

Critical Patterns (Apply First)

Eliminate Waterfalls:

  • Defer await until needed (move into branches)
  • Use Promise.all() for independent async operations
  • Start promises early, await late
  • Use better-all for partial dependencies
  • Use Suspense boundaries to stream content

Reduce Bundle Size:

  • Avoid barrel file imports (import directly from source)
  • Use next/dynamic for heavy components
  • Defer non-critical third-party libraries
  • Preload based on user intent

High-Impact Server Patterns

  • Use React.cache() for per-request deduplication
  • Use LRU cache for cross-request caching
  • Minimize serialization at RSC boundaries
  • Parallelize data fetching with component composition

Medium-Impact Client Patterns

  • Use SWR for automatic request deduplication
  • Defer state reads to usage point
  • Use lazy state initialization for expensive values
  • Use derived state subscriptions
  • Apply startTransition for non-urgent updates

Rendering Patterns

  • Animate SVG wrappers, not SVG elements directly
  • Use content-visibility: auto for long lists
  • Prevent hydration mismatch with inline scripts
  • Use explicit conditional rendering (? : not &&)

JavaScript Patterns

  • Batch DOM CSS changes via classes
  • Build index maps for repeated lookups
  • Cache repeated function calls
  • Use toSorted() instead of sort() for immutability
  • Early length check for array comparisons

References

Full documentation with code examples is available in:

  • references/react-performance-guidelines.md - Complete guide with all patterns
  • references/rules/ - Individual rule files organized by category

To look up a specific pattern, grep the rules directory:

grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/

Rule Categories in references/rules/

  • async-* - Waterfall elimination patterns
  • bundle-* - Bundle size optimization
  • server-* - Server-side performance
  • client-* - Client-side data fetching
  • rerender-* - Re-render optimization
  • rendering-* - DOM rendering performance
  • js-* - JavaScript micro-optimizations
  • advanced-* - Advanced patterns

What ships with it: 47 files

194.6 KB alongside SKILL.md

references/

7 more files not listed here. See all 47 in the repository.

Gives 2 of the 12 instructions most performance cost skills give in 723 tokens

Counted across 797 of the 1,117 authors here whose files we hold, read 2026-09-06

  • Check for product marketing context firstin 46 of 797, across 20 files
  • Measure before optimizingin 31 of 797, across 25 files
  • Profile first to identify the actual bottleneckin 23 of 797, across 22 files
  • Verify your robots.txt allows AI crawlersin 21 of 797, across 12 files
  • Import directly and avoid barrel fileshere, and in 19 of 797, across 15 files
  • Spawn all runs in the same turnin 18 of 797, across 11 files
  • Write a draft of the skillin 17 of 797, across 10 files
  • Understand the user's intentin 17 of 797, across 10 files
  • Use React.cache for per-request deduplicationhere, and in 16 of 797, across 11 files
  • Profile before optimizingin 16 of 797, across 14 files
  • Include specific numbers with sourcesin 15 of 797, across 8 files
  • Add lazy loading to below-fold imagesin 15 of 797, across 10 files

Said here and by no other author read

  • Defer await until needed
  • Batch DOM CSS changes via classes

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.