react-best-practices

Review React and Next.js codebases for performance and best practices.

44|7|Updated Oct 16, 2024
One-click install
npx skills add https://github.com/DiscourseGraphs/discourse-graph --skill react-best-practices-discoursegraphs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/DiscourseGraphs/discourse-graph/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/DiscourseGraphs/discourse-graph --skill react-best-practices-discoursegraphs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks and maintainability issues in React and Next.js applications by providing a comprehensive, impact-prioritized checklist for code reviews and automated refactoring.

Core Features & Use Cases

  • Performance Optimization: Identifies and provides solutions for critical issues like waterfalls, bundle bloat, and unnecessary re-renders.
  • Best Practice Enforcement: Guides developers on modern patterns for server-side rendering, data fetching, and component composition.
  • Use Case: Use this Skill when refactoring a slow-loading dashboard to identify and eliminate sequential data fetching waterfalls or to optimize heavy component imports.

Quick Start

Run the react-best-practices skill to review the current directory for performance improvements and architectural alignment.

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 performance and eliminate data fetching waterfalls?

To optimize React performance and eliminate data fetching waterfalls, you need a comprehensive code review that identifies sequential data fetching patterns and impact-prioritized refactoring solutions to resolve them.

What's the best way to reduce bundle size in a Next.js application?

The best way to reduce bundle size in a Next.js application is to run an automated best-practices review targeting bundle bloat and heavy component imports, which this skill provides to identify specific optimization opportunities.

How do I check my React codebase for modern server-side rendering patterns?

You can check your React codebase for modern server-side rendering patterns by running an automated architectural alignment review that evaluates your component composition and data fetching strategies against current best practices.

Does this React performance review work with TypeScript codebases?

Yes, this React performance review works with TypeScript codebases, as it is specifically designed to enforce modern patterns and consistent implementation across React and Next.js environments using TypeScript.

Why does my React dashboard load slowly and how can I identify the bottlenecks?

Your React dashboard may load slowly due to unnecessary re-renders, bundle bloat, or sequential data fetching waterfalls; an impact-prioritized performance optimization checklist can identify these specific bottlenecks for refactoring.