react-best-practices

Consolidate React and Next.js performance best practices for UI speed.

Updated Nov 28, 2025

Search Tags:#performance #suspense #react #next.js #memoization #server-components

Ready to run

npx skills add https://github.com/Monichre/digital-mischief-group --skill react-best-practices-monichre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Monichre/digital-mischief-group/tree/main/.factory/skills/react-best-practices
Command: npx skills add https://github.com/Monichre/digital-mischief-group --skill react-best-practices-monichre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill consolidates React and Next.js performance best practices into a practical guide that helps teams reduce load times, improve responsiveness, and simplify maintenance by codifying proven patterns.

Core Features & Use Cases

Eliminate waterfalls: parallelize data fetching and apply Suspense-friendly patterns to prevent long chains of waiting.
Bundle optimization: use dynamic imports, code-splitting, and selective imports to reduce the initial bundle size.
Server and client patterns: apply React Server Components, client/server boundaries, and caching strategies (e.g., React.cache, SWR) to maximize efficiency across environments.
Code review and refactor guidance: provide consistent signals for reviewing components, Next.js pages, and data-fetching logic.

Quick Start

Audit a sample React/Next.js page to identify slow data fetch paths, large bundles, and unnecessary re-renders.
Replace serial data fetches with parallel or batched requests; introduce Suspense boundaries where appropriate.
Add memoized components, use SWR for deduplication, and apply dynamic imports for heavy components.
Run a quick performance check and iterate on hotspots.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I eliminate data fetching waterfalls in Next.js pages?▼

Eliminate data fetching waterfalls in Next.js by parallelizing data requests and applying Suspense boundaries to prevent long chains of waiting. Batch independent fetches together instead of requesting them sequentially to deliver faster user experiences.

When should I use React Server Components versus client components?▼

Use React Server Components to maximize efficiency across server environments, and establish client boundaries only when necessary. Apply server and client patterns with caching strategies like React.cache or SWR to optimize rendering performance across contexts.

What is the best way to reduce initial bundle size in a React application?▼

Reduce initial bundle size in a React application by using dynamic imports, code-splitting, and selective imports. Apply memoization to prevent unnecessary re-renders and use dynamic imports specifically for heavy components to optimize loading performance.

Can I use SWR for data deduplication alongside React Server Components?▼

Yes, you can use SWR for data deduplication alongside React Server Components. Combine SWR caching strategies with server and client boundary patterns to maximize efficiency and enforce consistent data-fetching logic across both environments.

Why does my React component re-render unnecessarily during data updates?▼

React components re-render unnecessarily during data updates when memoization is absent. Apply memoized components and use SWR for data deduplication to prevent redundant renders, ensuring efficient state updates and faster UI responsiveness.