All skills
vercel-labs avatar

/vercel-react-best-practices

@805687f
by Vercel Labsvercel-labs/openreview1.7k stars
118

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.

Use this Skill: https://skilld.dev/gh/vercel-labs/openreview/vercel-react-best-practices

This session only. Nothing lands on disk.

rulesjs-min-max-loop.md

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

Use Loop for Min/Max Instead of Sort

Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.

Incorrect (O(n log n) - sort to find latest):

interface Project {
  id: string;
  name: string;
  updatedAt: number;
}

function getLatestProject(projects: Project[]) {
  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
  return sorted[0];
}

Sorts the entire array just to find the maximum value.

Incorrect (O(n log n) - sort for oldest and newest):

function getOldestAndNewest(projects: Project[]) {
  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
}

Still sorts unnecessarily when only min/max are needed.

Correct (O(n) - single loop):

function getLatestProject(projects: Project[]) {
  if (projects.length === 0) return null;

  let latest = projects[0];

  for (let i = 1; i < projects.length; i++) {
    if (projects[i].updatedAt > latest.updatedAt) {
      latest = projects[i];
    }
  }

  return latest;
}

function getOldestAndNewest(projects: Project[]) {
  if (projects.length === 0) return { oldest: null, newest: null };

  let oldest = projects[0];
  let newest = projects[0];

  for (let i = 1; i < projects.length; i++) {
    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
  }

  return { oldest, newest };
}

Single pass through the array, no copying, no sorting.

Alternative (Math.min/Math.max for small arrays):

const numbers = [5, 2, 8, 1, 9];
const min = Math.min(...numbers);
const max = Math.max(...numbers);

This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see the fiddle. Use the loop approach for reliability.

Source: SKILL.md on GitHub

No alerts17d4 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    This skill provides rules, tools, and scripts intended for compiling and managing React and Next.js performance optimization guidelines. No high-severity security considerations or anomalous patterns were discovered.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer6mo

    1/61 files flagged

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

Last checked against GitHub 2 months ago.

Dormantupdated 7 months ago
metadata
{
  "author": "vercel",
  "version": "1.0.0"
}
  • React
  • Performance
  • next.js
  • optimization
  • bundle-size
  • server-components
  • data-fetching
  • rendering
  • javascript

README badge

README badge for vercel-labs/openreview/vercel-react-best-practices

Provides 58 prioritized React and Next.js performance rules from Vercel Engineering, organized across waterfalls, bundle size, server/client data fetching, re-renders, and rendering patterns. Use when writing or refactoring React components and Next.js pages to apply production-grade optimization practices.

Generated from the current SKILL.md.

Does this skill apply to both React and Next.js?
Yes. The skill covers React components, Next.js pages, server components, server actions, and data fetching patterns for both frameworks.
Can I use this skill to review existing code for performance issues?
Yes. The skill is designed for reviewing and refactoring React/Next.js code against 58 prioritized rules organized by impact (critical, high, medium, low).
Does this skill cover bundle size optimization?
Yes. Bundle size optimization is marked as a critical priority category with 5 rules, including barrel imports, dynamic imports, and third-party script deferral.
What about server-side performance and data fetching?
The skill covers both. It includes rules for server components, React.cache(), LRU caching, parallel fetching, and client-side patterns like SWR deduplication and event listener optimization.

Generated from the current SKILL.md. These answers refresh after source changes.