Optimización de Rendimiento en React
React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler
1¿Cuál es el rol principal de React.memo?
¿Cuál es el rol principal de React.memo?
Respuesta
React.memo es un Higher-Order Component que memoriza el resultado del renderizado de un componente. Realiza una comparación superficial de las props y omite el re-renderizado si las props no han cambiado. Es particularmente útil para optimizar componentes hijos costosos que reciben las mismas props con frecuencia.
2¿Cuál es la diferencia principal entre useMemo y useCallback?
¿Cuál es la diferencia principal entre useMemo y useCallback?
Respuesta
useMemo memoriza el resultado de una función (el valor retornado), mientras que useCallback memoriza la función en sí. useMemo se usa para optimizar cálculos costosos, mientras que useCallback se usa para estabilizar las referencias de funciones pasadas como props, evitando re-renderizados innecesarios de componentes hijos memorizados.
3¿En qué caso el uso de React.memo puede ser contraproducente?
¿En qué caso el uso de React.memo puede ser contraproducente?
Respuesta
React.memo puede ser contraproducente en componentes que reciben props diferentes en cada renderizado, ya que el costo de la comparación superficial de props se agrega sin beneficio (el componente se re-renderizará de todas formas). Es mejor reservar React.memo para componentes que frecuentemente reciben las mismas props y tienen renderizados costosos.
¿Por qué usar useCallback para una función pasada como prop a un componente memorizado con React.memo?
¿Cuál es la ventaja principal del code splitting con React.lazy?
+19 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
Error Boundaries & Error Handling
Advanced React Patterns
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