react-best-practices

Apply React/Next.js performance best practices for rendering, data fetching, and bundle efficiency.

Updated Nov 26, 2025

Search Tags:#performance #react #nextjs #hydration #server-components #data-fetching

Ready to run

npx skills add https://github.com/Aias/dotfiles --skill react-best-practices-aias

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams write and review React/Next.js code with performance, reliability, and maintainability in mind by codifying best practices for hooks, server/client boundaries, data fetching, rendering, and bundle strategies.

Core Features & Use Cases

Guidance on hook usage, effects, memoization, and render optimizations to minimize re-renders.
Clear patterns for server components, client components, hydration, and data flow to avoid waterfalls and bottlenecks.
Practical use cases and references to reduce bundle size, improve caching, and accelerate development velocity.

Quick Start

Review the skill and apply its guidelines to a representative React component to observe measurable improvements in render performance and hydration behavior.

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 rendering and reduce unnecessary component re-renders?▼

Optimize React rendering by applying codified best practices for hook usage and memoization. This Skill enforces 57 rules across 8 categories to minimize unnecessary re-renders and improve component render performance.

What are the best practices for React server components and client boundaries in Next.js?▼

React server components and client boundaries require clear patterns for hydration and data flow to avoid waterfalls. This Skill provides concrete guidance on structuring these boundaries for safer, optimized Next.js UI rendering.

How do I prevent data fetching waterfalls in Next.js applications?▼

Prevent data fetching waterfalls by applying structured best practices for server and client component data flow. This Skill encodes rules for data fetching and suspense to eliminate bottlenecks and accelerate development velocity.

Does this React performance guidance cover bundle size reduction and caching strategies?▼

Yes, this React performance guidance covers bundle size reduction and caching strategies. It references in-depth materials and practical use cases to enforce safe, optimized patterns for bundle efficiency in Next.js apps.

Why does my Next.js hydration behavior degrade application performance?▼

Next.js hydration behavior degrades performance when server and client boundaries are improperly structured. Applying codified rules for hydration and suspense patterns resolves these bottlenecks and improves rendering efficiency.

Do I need prior knowledge of Next.js suspense patterns to review React performance?▼

Prior knowledge of Next.js suspense patterns is helpful but not required to review React performance. This Skill provides a catalog of 57 rules and in-depth references to guide writing and reviewing components safely.