skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill react-best-practices-mauriciodelrio
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jorgeochipinti97jorgeochipinti97

react-performance

Audit and optimize React/Next.js application performance across rendering and data fetching.

Community
Advanced
SnakeOSnakeO
9

refactor:react

Refactor React 19 TypeScript components by extracting custom hooks and memoizing.

Community
Advanced
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
mako-aimako-ai
11

react-render-profiling

Instrument React components and collect render metrics to identify performance bottlenecks.

Official
Advanced