react-best-practices

Optimize React and Next.js applications with prioritized performance rules.

1|Updated Dec 1, 2016

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

Ready to run

npx skills add https://github.com/aaron-vaz/dotfiles --skill react-best-practices-aaron-vaz

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for optimizing the performance of React and Next.js applications, addressing issues from critical waterfalls to advanced patterns.

Core Features & Use Cases

Performance Optimization: Offers 40+ rules across 8 categories to improve React/Next.js app performance.
Code Review & Refactoring: Aids in identifying and fixing performance bottlenecks during development and maintenance.
Use Case: When writing a new data-fetching component in Next.js, consult these guidelines to ensure efficient server-side rendering and client-side data handling.

Quick Start

Review the provided React code against the critical patterns for eliminating waterfalls and optimizing bundle size.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I optimize React and Next.js application performance during code review?▼

To optimize React and Next.js application performance, apply over 40 actionable rules across 8 categories focusing on eliminating data fetch waterfalls, rendering efficiency, and bundle size reduction during code review.

What is the best way to eliminate critical waterfalls when fetching data in Next.js?▼

The best way to eliminate critical waterfalls in Next.js is to follow prioritized data-fetching patterns that ensure efficient server-side rendering and client-side data handling, preventing sequential loading delays.

How do I reduce bundle size when refactoring a React application?▼

Reduce React bundle size during refactoring by applying specific optimization rules targeting bundle size, eliminating unnecessary code, and improving overall application load times.

Does this React optimization guide cover both load times and runtime performance?▼

Yes, this React optimization guide covers both application load times and runtime performance by providing actionable rules for rendering, data fetching, and bundle optimization across React and Next.js.

When should I apply these Next.js rendering optimization patterns?▼

You should apply these Next.js rendering optimization patterns when writing new data-fetching components, refactoring existing code, or reviewing code to ensure efficient server-side rendering and client-side data handling.

What are the limitations of using static rules for React performance refactoring?▼

The limitation of using static rules for React performance refactoring is that while they provide comprehensive guidelines across 8 categories, they must be manually applied to identify and fix specific runtime bottlenecks.