vercel-react-best-practices

Apply React performance best practices to components, rendering, and data flows.

11|2|Updated Jan 20, 2026

Search Tags:#performance #suspense #react #optimization #refactor #bundle #server-components

Ready to run

npx skills add https://github.com/mxmkhv/telegram-console --skill vercel-react-best-practices-mxmkhv

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mxmkhv/telegram-console/tree/main/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mxmkhv/telegram-console --skill vercel-react-best-practices-mxmkhv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates React performance best practices into a unified reference so teams can consistently optimize components, data flows, and bundles across projects.

Core Features & Use Cases

46 rules across 7 categories prioritized by impact to guide automated refactoring and code generation.
Clear guidance for eliminating waterfalls, bundle-size reduction, suspense strategies, server-side data patterns, and client rendering optimizations.
Use cases include writing new React components, performing client-side data fetching, code reviews, refactoring, and performance-focused code generation.

Quick Start

Scan your React project and implement the top-priority performance patterns (eliminate waterfalls, optimize bundle imports, enable suspense boundaries, and apply server/client data strategies) to achieve faster initial render and smoother UX.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize React performance and reduce render waterfalls in my Next.js project?▼

To optimize React performance, you should eliminate data fetch waterfalls, apply memoization, and use Suspense boundaries. Enforcing these patterns during refactoring shrinks bundle sizes and improves Time to Interactive (TTI) for smoother user experiences.

What are the best practices for using Suspense boundaries and lazy loading in React?▼

Suspense boundaries and lazy loading are best practices for managing client rendering and data fetching. Applying suspense strategies allows components to load asynchronously, preventing render blocking and improving initial page load speed.

How do I handle server-side data fetching safely with React Server Components?▼

Handling server/client data safely with React Server Components involves enforcing specific server-side data patterns. This approach prevents waterfalls by fetching data on the server before client rendering, ensuring better performance.

Can I use these React optimization rules for automated code reviews and scaffolding?▼

Yes, you can apply these 46 React optimization rules during automated code reviews and scaffolding. The rules are prioritized by impact to guide code generation, ensuring consistent performance improvements across new and existing components.

What is the best way to shrink a React bundle size during a refactor?▼

The best way to shrink a React bundle size during a refactor is by optimizing imports and enabling lazy loading. Applying these best practices reduces the overall payload and significantly improves the application's TTI.

Why does my React app have a slow Time to Interactive and how do I fix it?▼

A slow Time to Interactive (TTI) in a React app is often caused by render waterfalls and large bundle sizes. You can fix it by applying memoization, using Suspense boundaries, and enforcing safe server/client data handling patterns.