react-best-practices

Review React and Next.js code for re-render, bundle, and data fetching inefficiencies.

1|Updated May 12, 2026

Search Tags:#performance #suspense #react #bundle size #next.js #server components #re-render optimization

Ready to run

npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill react-best-practices-moxywolfllc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/MoxyWolfLLC/moxywolf-plugins/tree/main/plugins/dev-infrastructure-skills/skills/react-best-practices
Command: npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill react-best-practices-moxywolfllc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React apps often suffer from slow pages, unnecessary re-renders, and bloated bundles due to inefficient data fetching, component structure, and client/server boundary mistakes.

Core Features & Use Cases

Eliminates waterfalls and unlocks parallel loading for pages and dashboards with dependent and independent data paths.
Reduces bundle size and client work by avoiding barrel imports, deferring non-critical code, and using targeted imports and dynamic loading.
Improves rendering performance by choosing appropriate state placement, memoization/callback strategy, and server-first component design to prevent avoidable updates.

Quick Start

Use react-best-practices to review the attached React/Next.js code and list the highest-impact fixes for re-renders, bundle size, and any waterfall data fetching patterns.

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

Optimize React re-renders by choosing appropriate state placement and applying targeted memoization or callback strategies to prevent avoidable updates. This approach improves rendering performance by ensuring components only re-render when their actual dependencies change.

What's the best way to prevent waterfall data fetching in Next.js?▼

Prevent waterfall data fetching in Next.js by eliminating sequential awaits and enforcing Suspense boundaries for independent loading paths. This unlocks parallel data loading for dashboards and pages with both dependent and independent data requirements.

When should I use React Server Components instead of Client Components?▼

Default to React Server Components to reduce bundle size and client work, ensuring props passed to Client Components are JSON-serializable. This server-first architecture minimizes shipped JavaScript and improves initial page load performance.

Can I use Suspense boundaries for independent parallel loading in React?▼

Yes, you can use Suspense boundaries to unlock parallel loading for independent data paths within your pages. This prevents slow sequential rendering and ensures independent data streams load concurrently without blocking each other.

How do I review existing React code for performance bottlenecks?▼

Review existing React code by analyzing re-render patterns, bundle inefficiencies, and client/server boundary mistakes in your data fetching strategy. This identifies high-impact fixes for slow pages caused by component structure and data flow issues.