Advanced React Patterns
Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters
1¿Qué es el patrón Compound Components?
¿Qué es el patrón Compound Components?
Respuesta
El patrón Compound Components permite crear componentes que comparten estado implícito a través de React Context, sin pasar props explícitamente. Este patrón se usa en bibliotecas como Radix UI y Headless UI para proporcionar una API flexible y componible. Los componentes hijo pueden acceder al estado compartido automáticamente, permitiendo la personalización de la estructura sin perder la lógica común.
2¿Cuál es el principio del patrón Render Props?
¿Cuál es el principio del patrón Render Props?
Respuesta
El patrón Render Props consiste en pasar una función como prop que retorna un elemento React, permitiendo al componente padre compartir su lógica con el componente hijo. Esta función recibe datos o métodos del padre como parámetros. Este patrón era muy popular antes de la llegada de los hooks, especialmente con bibliotecas como React Router y Downshift.
3¿Qué son los Higher-Order Components (HOC)?
¿Qué son los Higher-Order Components (HOC)?
Respuesta
Los Higher-Order Components son funciones que toman un componente como parámetro y retornan un nuevo componente enriquecido con props o comportamientos adicionales. Este patrón permite reutilizar lógica entre componentes sin duplicación de código. Los HOC se usan para funcionalidades transversales como autenticación, tracking o gestión de permisos.
¿Cuál es la diferencia entre un componente controlado y no controlado?
¿Qué es el patrón Provider?
+17 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis