react

Apply 40 best-practice rules to optimize React 19 performance.

3|1|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/thongdn-it/react-agent-skills --skill react-thongdn-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/thongdn-it/react-agent-skills/tree/main/skills/react
Command: npx skills add https://github.com/thongdn-it/react-agent-skills --skill react-thongdn-it

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Helps AI agents and developers optimize React 19 performance by applying best-practice guidelines for concurrent rendering, server components, actions, hooks, and memoization.

Core Features & Use Cases

  • Provides a structured 40-rule guide across 8 categories to reduce re-renders and improve UI responsiveness.
  • Includes concrete examples, references, and actionable patterns to guide automated refactoring and code generation.
  • Suitable for React 19 projects focusing on concurrency, server components, and performance-aware UI patterns across typical React codebases.

Quick Start

Provide your React 19 project to the AI agent and run through the 40-rule framework for refactoring.

Frequently Asked Questions about react

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

FAQPage Schema
How do I optimize React 19 performance for concurrent rendering and server components?▼

To optimize React 19 performance, apply a structured 40-rule guide across 8 categories focusing on concurrent rendering, server components, actions, and memoization. This framework helps reduce re-renders and improve UI responsiveness using actionable patterns and concrete examples.

What are the best practices for memoization in React 19?▼

Best practices for memoization in React 19 involve applying structured rules across UI modules, forms, and data-fetching patterns. These guidelines help automate refactoring and code generation to effectively reduce unnecessary re-renders and enhance overall performance.

How do I refactor a React 19 project to improve UI responsiveness?▼

Refactor a React 19 project by running it through an AI agent applying a 40-rule framework. This process enforces performance-aware UI patterns, concurrency features, and memoization strategies across typical codebases to guide automated code generation and refactoring.

Does this React 19 optimization guide support client-side component development?▼

Yes, this optimization guide applies directly to client-side React 19 component development. It enforces best-practice rules for concurrent features, server components, and memoization strategies to ensure performance-aware patterns across your UI modules.

What is the best way to apply server components and actions in React 19?▼

The best way to apply server components and actions in React 19 is by following a structured 40-rule guide. It provides concrete examples and references to React docs to help enforce performance-aware UI patterns and data-fetching logic.

When should I not use memoization strategies in React 19?▼

Memoization strategies in React 19 should be carefully evaluated within the 8-category rule framework to avoid unnecessary overhead. The guide helps identify when performance-aware UI patterns and concurrent rendering features are more appropriate than forced memoization.