react-best-practices

Apply React/Next.js performance best practices to reduce waterfalls and optimize rendering.

258|26|Updated Dec 9, 2025

Search Tags:#performance #frontend #react #optimization #next.js #code-review

Ready to run

npx skills add https://github.com/majiayu000/spellbook --skill react-best-practices-majiayu000

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/majiayu000/spellbook/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/majiayu000/spellbook --skill react-best-practices-majiayu000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps frontend teams reduce rendering delays, minimize bundle sizes, and avoid data-fetch waterfalls in React and Next.js apps by providing a structured performance playbook, practical checks, and remediation patterns.

Core Features & Use Cases

Prioritized playbook covering waterfalls, bundle size, server-vs-client work, rerenders, and rendering costs.
Practical guidelines and checklists for reviewing, refactoring, and validating frontend code for performance improvements.
Use Case: when optimizing a slow Next.js page, apply the framework to identify bottlenecks and implement targeted improvements with measurable results.

Quick Start

Review a React/Next.js project and apply the top-priority performance rule to a component.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I identify and fix data-fetching waterfalls in Next.js pages?▼

To reduce React bundle size, apply best practices that target server-vs-client work allocation and rendering costs. The framework provides practical checks and remediation patterns to minimize bundle sizes during frontend code reviews.

What is the best way to optimize React component rerenders during a code review?▼

Optimizing React rerenders involves applying a structured behavioral checklist to guide analysis and code changes. This approach evaluates rendering costs and server-vs-client work to implement targeted improvements with measurable results.

Can I use this performance framework for both server and client components in Next.js?▼

Yes, the framework applies to performance-focused optimization across Next.js server components and client components. It provides prioritized rules covering waterfalls, bundle size, and rendering to guide component refactoring.

How do I validate frontend code changes after applying React performance optimizations?▼

Validate frontend code changes by using a behavioral checklist designed to verify performance improvements. This checklist guides the analysis, code modification, and verification phases to ensure measurable results.

Why does my Next.js page render slowly and how do I prioritize performance fixes?▼

Slow Next.js page rendering is addressed by a prioritized playbook covering waterfalls, bundle size, server-vs-client work, and rerenders. It helps identify bottlenecks and implement targeted improvements with measurable outcomes.