react-best-practices

Review React and Next.js code against 40+ performance optimization rules.

Updated Feb 20, 2026

Search Tags:#best practices #performance #react #optimization #bundle size #rendering #next.js

Ready to run

npx skills add https://github.com/efiadm/informatik-ai-studio --skill react-best-practices-efiadm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/efiadm/informatik-ai-studio/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/efiadm/informatik-ai-studio --skill react-best-practices-efiadm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common performance bottlenecks in React and Next.js applications, helping developers eliminate waterfalls, reduce bundle sizes, and improve rendering efficiency.

Core Features & Use Cases

Performance Auditing: Identifies over 40 rules for optimization across critical areas like data fetching, bundle size, and rendering.
Code Refactoring Guidance: Provides specific code examples for implementing best practices.
Use Case: When experiencing slow load times or janky interactions in a React app, use this Skill to pinpoint and fix the underlying performance issues.

Quick Start

Use the react-best-practices skill to review the performance of the current React codebase.

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 performance for slow components?▼

To optimize React rendering, apply rules for efficient component rendering and parallel data fetching to eliminate waterfalls. It provides specific code refactoring examples to fix janky interactions.

What's the best way to reduce bundle size in Next.js applications?▼

The best way to reduce Next.js bundle size is using dynamic imports and following targeted optimization rules. This identifies performance bottlenecks and provides code examples for minimizing loaded JavaScript.

Why does my React app have data fetching waterfalls and how do I fix them?▼

React data fetching waterfalls occur when requests execute sequentially instead of in parallel. Fix them by implementing parallel data fetching patterns detailed in the optimization rules to improve load times.

Can I use these React best practices for both client and server side rendering?▼

Yes, these React and Next.js optimization practices address bundle size, data fetching, and rendering efficiency across both client and server side rendering contexts.

How do I audit my React codebase for performance bottlenecks?▼

Audit your React codebase by reviewing it against over 40 optimization rules covering data fetching, bundle size, and rendering. This pinpoints underlying performance issues causing slow load times.