react-best-practices

Apply React 19+ hook rules, memoization, and stable keys during code reviews.

3|Updated Apr 12, 2026

Search Tags:#performance #react #hooks #memoization #server-components #component-patterns

Ready to run

npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill react-best-practices-mauriciodelrio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/react-best-practices
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill react-best-practices-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often misuse React hooks, keys, and component composition, leading to unnecessary re‑renders, performance bottlenecks, and brittle code. This skill provides concrete rules to prevent those issues and ensure maintainable, high‑performance React applications.

Core Features & Use Cases

Hook Discipline: Enforces top‑level hook usage, custom hook naming, and avoids conditional hook calls.
Memoization Guidance: Shows when to apply useMemo, useCallback, and React.memo based on profiling results.
Key & Children Patterns: Recommends stable keys and compositional children approaches for clean component hierarchies.
Server vs Client Components: Directs placement of 'use client' to minimize client‑side bundle size.
Use Case: Apply these rules during code reviews of a large React 19+ codebase to reduce unnecessary renders and improve overall app responsiveness.

Quick Start

Use the react-best-practices skill to review and improve my React components for optimal hook usage, memoization, and key handling.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

When should I use useMemo and useCallback to prevent React re-renders?▼

Apply useMemo and useCallback strategically based on profiling results to prevent unnecessary React re-renders, rather than using them indiscriminately across all components.

How do I decide where to place 'use client' in React server components?▼

Direct 'use client' placement to isolate interactive logic and minimize client-side bundle size when deciding between React server and client components.

What are the rules for calling React hooks without breaking component reliability?▼

React hooks must be called at the top level of components to ensure reliability, avoiding conditional hook calls and enforcing proper custom hook naming conventions.

How do I use stable keys and children patterns for clean React component hierarchies?▼

Use stable keys and compositional children approaches to build clean React component hierarchies, preventing brittle code and maintaining structural integrity during re-renders.

Does this React best practices guidance work for React 19 applications?▼

Yes, this guidance targets React 19+ applications specifically, applying rules for hook usage, memoization, stable keys, and server/client component decisions to improve responsiveness.