9 preguntas difíciles de entrevista de React para ingenieros frontend senior

[Grego]

9 Preguntas Difíciles de React para Ingenieros Frontend Senior

StackSnacker

Foto por Mimi Thian en Unsplash

Si estás aplicando para el puesto de Ingeniero Frontend Senior, debes prepararte para algunas preguntas de entrevista rigurosas de React que te exigirán profundizar en los detalles. Para puestos de nivel senior, los entrevistadores no solo buscarán conocimientos sobre componentes y hooks; evaluarán tu comprensión arquitectónica, consideraciones de rendimiento y respeto por React como biblioteca, considerando sus internos.

Aquí tienes 9 preguntas difíciles de React que comúnmente aparecen en entrevistas de nivel senior, con una perspectiva sobre lo que realmente quieren ver en tus respuestas.

1. ¿Cómo gestiona React la memoria, y cuáles son las fugas de memoria más comunes a tener en cuenta?

React gestiona la memoria mediante la desmontaje automático de componentes y la limpieza de recursos a través del ciclo de vida del componente. Las fugas de memoria ocurren cuando los recursos (referencias internas) no se eliminan adecuadamente. Las fugas de memoria comunes incluyen:

• Ciclos de vida donde un componente padre no puede eliminar un listener en la función de limpieza de useEffect.
• Temporizadores/intervalos no eliminados al desmontar.
• Cierres que mantienen estado o props que ya no son válidos, impidiendo así su recolección de basura.
• Uso incorrecto de refs, almacenando grandes cantidades de datos o nodos del DOM indefinidamente.

Un entrevistador probablemente querrá ver que tienes control proactivo sobre los efectos secundarios y comprendes cómo el uso del DOM virtual de React interactúa con el DOM real bajo el capó.

2. ¿Qué son los Portales de React, y cuándo los usarías?

Los Portales de React permiten renderizar hijos en un nodo del DOM que existe fuera de la jerarquía de un componente padre. Esto es particularmente útil para elementos de interfaz como:

• Diálogos modales
• Tooltips
• Menús desplegables

Estos componentes a menudo necesitan escapar de las restricciones del contenedor padre en cuanto a overflow y z-index. Usar portales te permite mantener tu jerarquía de componentes y lógica en el código, mientras renderizas el componente en un lugar completamente diferente en el DOM real.

3. ¿Cómo manejas la autenticación y autorización en una aplicación React?

La autenticación y autorización generalmente implican manejar el control de acceso a lo largo de la aplicación. Una respuesta adecuada de nivel senior suele cubrir:

• Autenticación basada en JWT, almacenando estos tokens de forma segura, idealmente en cookies httpOnly o sessionStorage.
• Protección de rutas usando React Router <Private> o wrappers de ruta para restringir el acceso basado en rol o permiso.

• Usando la API de contexto o bibliotecas de gestión de estado como Redux (Zustand) para persistir el estado del usuario.
• Elementos de la interfaz de usuario o elementos de navegación se renderizan condicionalmente según los niveles de acceso o permisos del usuario.

Puntos adicionales si puedes incluir información sobre la actualización de tokens, flujos de cierre de sesión y proveedores de autenticación de terceros (por ejemplo, OAuth).

4. ¿Qué son Suspense y Concurrent Mode, y cómo mejoran el rendimiento?

Suspense de React proporciona un manejo declarativo del estado de carga para componentes, como componentes cargados de forma perezosa o recuperación de datos.

El Modo Concurrente (que se introduce gradualmente con características como useTransition y startTransition) permite que el motor de renderizado de React pause y reanude el renderizado según sea necesario, priorizando actualizaciones de alta prioridad y permitiéndole recuperarse de interrupciones.

Ambas características contribuyen a:

• Experiencias de usuario más fluidas (por ejemplo, sin saltos durante la entrada o cambio de pestañas).
• Patrones de interfaz de usuario de carga predecibles.
• Rendimiento percibido mejorado al construir la salida renderizada de forma fragmentada.

5. ¿Cómo evitas cierres obsoletos al usar useEffect?

Los cierres obsoletos ocurren cuando un efecto interactúa con props o estado obsoletos porque la función captura el valor en el momento en que se creó. Algunas cosas que puedes hacer incluyen:

• Agregar correctamente las dependencias al array de dependencias de useEffect.
• Usar la forma de actualización funcional setState para acceder al estado más reciente.
• Usar useRef para persistir valores mutables entre renders.
• Memoizar callbacks pasándolos a componentes hijos o efectos.

Comprender los cierres obsoletos demuestra que tienes una comprensión de cómo funcionan los cierres y los re-renderizados en el estilo funcional de programación de React.

6. ¿Cómo implementarías una lista de desplazamiento infinito en React?

Un componente de desplazamiento infinito necesita cargar datos de forma escalonada (incremental) a medida que el usuario desplaza. Una solución más sofisticada incluiría:

• Utilizar la API Intersection Observer para determinar cuándo un elemento “sentinela” está en vista.
• Coordinar la paginación o los cursores en las llamadas a la API.
• Virtualizar la lista usando bibliotecas como react-window o react-virtualized para renderizar solo los elementos visibles, mejorando el rendimiento.
• Debouncear o limitar los eventos de desplazamiento para evitar saturar la interfaz de usuario con actualizaciones.

Esta es una pregunta sobre tu capacidad para diseñar componentes eficientes y escalables con cargas de datos del mundo real.

7. ¿Cuál sería tu método para persistir el estado entre recargas de página en una aplicación de React?

Dependiendo de la descripción de “persistir el estado”, podrías suponer:

• Usar localStorage o sessionStorage para persistir el estado entre sesiones o pestañas.
• Hidratar el estado desde el almacenamiento al abrir la aplicación, y posiblemente una instancia con inicialización perezosa con useState.
• Usar Redux Persist u otras bibliotecas para aplicaciones con complejidad y estructuras de almacenamiento mutables.
• Tener en cuenta seguridad y rendimiento — no almacenes datos sensibles sin cifrar en localStorage.

El entrevistador quiere saber no solo qué usarías, sino por qué y cuándo es apropiado.

8. ¿Cómo hace React agrupar las actualizaciones de estado, y cuándo no las agrupa?

React agrupa varias actualizaciones para emitir un solo render por razones de rendimiento, específicamente para optimizar controladores de eventos y métodos de ciclo de vida. Pero no agrupa actualizaciones en todos los casos.

• Cuando trabajas con setTimeout y Promise, o con nuestros propios controladores de eventos personalizados, las actualizaciones de estado pueden ocurrir una a la vez.
• React 18 nos trajo agrupación automática incluso en contextos asíncronos, pero es importante entender cuándo no va a agrupar actualizaciones por razones de rendimiento.

También querrás estar familiarizado con el flujo de actualizaciones de forma sincrónica con flushSync() y la introducción de transiciones con startTransition() cuando necesites un control más granular sobre tus actualizaciones.

9. ¿Cómo analizas y optimizas el rendimiento de renderizado en aplicaciones de React?

Una de las habilidades clave que poseen los ingenieros senior es la capacidad de optimizar el rendimiento. Algunas técnicas de alto nivel a considerar incluyen:

• Usar el React Profiler para verificar renders innecesarios.
• Memoizar componentes usando React.memo, useMemo o useCallback.
• Usar Context o soluciones de gestión de estado en lugar de prop drilling.
• Utilizar división de código y carga perezosa para dividir tus paquetes.
• Virtualizar listas cuando se vuelven demasiado largas.
• Minimizar cuándo tus componentes se actualizan, entender cuándo se actualizan y, por último, entender por qué.

Bonus: Ser capaz de demostrar un problema de rendimiento que resolviste en un proyecto de ingeniería anterior puede ser muy impactante en entrevistas.

Pensamientos finales

Estas preguntas ofrecen una visión de los internos de React, decisiones arquitectónicas y problemas de rendimiento. La segunda (y a veces la primera) pregunta una vez que hemos establecido React y el rendimiento parecen ser áreas donde podemos diferenciar a un ingeniero frontend senior de uno intermedio.

Si te estás preparando para entrevistas, presta atención al “por qué” del “cómo”. Los entrevistadores quieren ver la justificación de tus decisiones teniendo en cuenta tu experiencia real y todos los compromisos.

¿Cuál es tu pregunta de entrevista de React más desafiante?
Publica en los comentarios, y hablemos sobre cómo abordarla.