react-19

Enforce React 19 patterns and compiler best practices for .tsx files.

1|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/professor-moody/cloud-tools --skill react-19-professor-moody
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/professor-moody/cloud-tools/tree/main/repos/prowler/skills/react-19
Command: npx skills add https://github.com/professor-moody/cloud-tools --skill react-19-professor-moody

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers adopt modern React 19 patterns and leverage the React Compiler for automatic optimizations, ensuring efficient and maintainable component development.

Core Features & Use Cases

  • Automatic Optimization: Understand how React Compiler handles memoization, eliminating the need for manual useMemo and useCallback.
  • Modern Imports: Enforces named imports for React hooks and core functionalities.
  • Server Components: Guides the use of Server Components by default and Client Components only when necessary.
  • New Hooks: Demonstrates the usage of use() for promises and conditional context, and useActionState for managing form states.
  • Simplified Refs: Shows the new pattern of passing ref as a direct prop, removing the need for forwardRef.
  • Use Case: When refactoring an existing React application to React 19, or starting a new project, this Skill ensures you are using the latest best practices for performance and code clarity.

Quick Start

Use the react-19 skill to refactor a React component to use named imports and avoid manual memoization.

Frequently Asked Questions about react-19

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

FAQPage Schema
How do I stop using useMemo and useCallback with the React Compiler?

The React Compiler handles automatic memoization, eliminating the need for manual useMemo and useCallback. It automatically optimizes your components to ensure efficient rendering and maintainable code without manual intervention.

What is the correct way to pass refs in React 19?

In React 19, you can pass ref as a direct prop. This simplified refs pattern removes the need to wrap your components with forwardRef, streamlining component development.

When should I use Server Components instead of Client Components in React 19?

You should use Server Components by default in React 19. Adopt Client Components only when necessary, such as when you need client-side interactivity, to ensure efficient rendering and maintainable architecture.

How do I use the use hook for promises and context in React 19?

The new use hook in React 19 allows you to read promises and conditional context. It enables direct integration with asynchronous operations and context values within your component tree.

Does React 19 replace forwardRef with a new ref prop pattern?

Yes, React 19 introduces passing ref as a direct prop. This modern pattern simplifies component APIs and removes the forwardRef boilerplate previously required for exposing DOM nodes to parent components.

What are the best practices for managing form states with useActionState in React 19?

The useActionState hook in React 19 is used for managing form states. It works with Actions to facilitate efficient form handling and state updates following modern compiler-driven optimization patterns.