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.