react-19

Guide React 19 development with React Compiler optimizations and Server Components.

Updated Feb 21, 2026

Search Tags:#react #compiler #server components #actions #react 19 #use hook

Ready to run

npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill react-19-josemartinrodriguezmortaloni

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/josemartinrodriguezmortaloni/opencode-config/tree/main/skill/react-19
Command: npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill react-19-josemartinrodriguezmortaloni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers adopt modern React 19 patterns, leveraging the React Compiler to eliminate the need for manual memoization and optimize component performance.

Core Features & Use Cases

Automatic Optimization: Understand how the React Compiler handles optimizations, removing the need for useMemo and useCallback.
Server Components: Learn the best practices for Server Components and when to use "use client" directives.
New Hooks: Utilize the use() hook for data fetching and conditional context.
Actions: Implement server-side actions with useActionState for form handling.
Ref as Prop: Adopt the new, simpler way of passing refs to components.

Quick Start

Use the react-19 skill to refactor a React component to remove manual memoization.

Frequently Asked Questions about react-19

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

FAQPage Schema

How does the React Compiler handle memoization automatically?▼

The React Compiler handles memoization automatically by optimizing component re-renders, eliminating the need for manual `useMemo` and `useCallback` hooks in your React 19 components.

What is the best way to use Server Components and "use client" directives in React 19?▼

The best way to use Server Components in React 19 involves applying `"use client"` directives strictly to client-side interactive components, ensuring server-side rendering best practices are maintained.

How do I implement server actions with useActionState for form handling?▼

To implement server actions with `useActionState` for form handling, define your server-side action and pass it to the hook to manage form state and submissions efficiently within your React components.

Can I use the use() hook for conditional context and data fetching in React 19?▼

Yes, you can use the `use()` hook in React 19 for data fetching and reading conditional context, allowing you to unwrap promises and context values directly within your component logic.

How do I refactor a React component to remove manual useMemo and useCallback?▼

To refactor a React component and remove manual `useMemo` and `useCallback`, rely on the React Compiler's automatic optimizations by deleting those hooks and trusting the compiler to prevent unnecessary re-renders.

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

You should not use manual memoization in React 19 when the React Compiler is enabled, as it automatically handles performance optimizations, making manual `useMemo` and `useCallback` hooks redundant.