Las entrevistas de React mezclan especificidades del framework — hooks, rendering, estado — con fundamentos de JavaScript que deciden si realmente entiendes qué está haciendo React. Aquí están las preguntas más comunes con respuestas modelo. Middle: comprensión más profunda, optimización y situaciones reales de trabajo.
Ayuda cuando el cómputo es genuinamente costoso, o cuando el valor es una dependencia de otro hook o un hijo memoizado, donde una referencia nueva en cada render derrota la memoización. Es ruido alrededor de operaciones baratas, porque la comparación y el valor retenido también cuestan algo. Envolver cada valor en useMemo hace el código más difícil de leer sin ganancia medible.
Abre el Profiler, graba una interacción, y usa "why did this render" para ver si fue props, state, o el padre. Las causas usuales son un objeto o arrow function creado inline en el padre, un context cuyo valor es un objeto nuevo en cada render, o state que vive más arriba en el árbol de lo necesario. Arregla la causa en vez de recurrir a React.memo, que solo la esconde.
Context evita enhebrar un valor a través de componentes a los que no les importa — tema, idioma, el usuario actual. Se vuelve equivocado para estado que cambia frecuentemente, porque cada consumidor re-renderiza cuando el valor cambia y no hay un selector para suscribirse a una parte de él. En ese punto quieres una librería de estado con suscripciones en vez de un context que tiene todo.
Porque la versión ingenua le falta todo lo que hace difíciles a los datos del servidor: caché, deduplicar requests idénticos, refetch cuando la ventana recupera el foco, reintentos, y no escribir en un componente desmontado. Reescribir eso por pantalla es donde viven los bugs. El cambio mental es que los datos del servidor son una caché que sincronizas, no state que posees.
useEffect corre después de que el navegador pintó, así el usuario puede ver brevemente el estado anterior. useLayoutEffect corre sincrónicamente después de las mutaciones del DOM pero antes de pintar, lo que previene ese parpadeo al costo de bloquear. Usa useLayoutEffect solo cuando mides el DOM y cambias inmediatamente basado en la medición — una posición de tooltip, un ajuste de scroll.
Un error boundary lo atrapa y muestra un fallback en vez de una página en blanco, ya que un error de render no atrapado desmonta todo el árbol. Los boundaries no atrapan errores en event handlers o código async, que es la parte que la gente se pierde — esos necesitan try/catch ordinario. Coloca boundaries alrededor de secciones significativas así un widget roto no tumba toda la pantalla.
A nivel de ruta primero, porque un usuario que llega a una pantalla no debería descargar el resto de la app. Luego alrededor de componentes genuinamente pesados y raramente usados — una librería de gráficos, un editor de texto enriquecido, un modal que la mayoría de los usuarios nunca abre. Dividir más pequeño que eso agrega overhead de requests y estados de carga a cambio de kilobytes.
En una entrevista real hablas bajo presión. Cam hace estas mismas preguntas, evalúa cada respuesta y muestra exactamente qué mejorar.
Practicar entrevista de Middle React Frontend →