react-19

Guide React 19 component patterns with compiler-assisted optimizations.

3|Updated Apr 5, 2023
One-click install
npx skills add https://github.com/mrp4sten/.dotfiles --skill react-19-mrp4sten
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/mrp4sten/.dotfiles/tree/main/development/IA/opencode/skill/react-19
Command: npx skills add https://github.com/mrp4sten/.dotfiles --skill react-19-mrp4sten

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manual memoization overhead in React 19 components is error-prone and verbose; this guide demonstrates compiler-assisted patterns to optimize rendering without useMemo/useCallback.

Core Features & Use Cases

  • Server Components First: recommended pattern for initial rendering and data fetching
  • Import discipline: proper named imports to enable tree-shaking and compiler optimizations
  • Client vs Server: clear rules to decide when to use client components and the "use client" directive

Quick Start

Use React 19 patterns to write components without manual memoization and rely on compiler optimizations for stable renders.

Frequently Asked Questions about react-19

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

FAQPage Schema
How do I skip manual memoization in React 19 components?

You can skip manual memoization in React 19 by adopting compiler-assisted patterns, relying on the React compiler for stable renders instead of writing verbose useMemo and useCallback hooks.

When should I use server components versus client components in React 19?

Use server components first for initial rendering and data fetching, and only apply the 'use client' directive when you specifically need client-side interactivity or browser APIs.

Do I need named imports for React 19 compiler optimizations to work?

Yes, maintaining proper named imports is required to enable tree-shaking and ensure the React 19 compiler can effectively apply optimizations to your components.

What is the best way to structure React 19 projects for compiler-assisted rendering?

Structure projects using a Server Components First approach, applying correct 'use client' directives and import discipline to let the React 19 compiler handle rendering optimizations automatically.

Why does avoiding useMemo and useCallback help in React 19?

Avoiding useMemo and useCallback helps because manual memoization is error-prone and verbose, whereas the React 19 compiler automatically optimizes rendering without these explicit hooks.