React Preguntas de entrevista

Lo que cubren las entrevistas de React

Ejemplos de preguntas de entrevista sobre React

• ¿Qué problema resuelven los hooks de React y cuáles son las reglas de los hooks?
  Lo que cubre una buena respuesta

  • Reutilización de lógica con estado
  • solución a problemas de clases (this, herencia)
  • reglas: solo en funciones de React, en el nivel superior, sin condicionales
  • reglas: comenzar con 'use'

  Ver respuesta de ejemplo

  Los hooks resuelven el problema de reutilizar lógica con estado entre componentes sin necesidad de usar patrones como render props o HOCs, que complicaban el árbol de componentes. También eliminan la complejidad de las clases, como el manejo de 'this' y la herencia. Las reglas de los hooks son: solo llamarlos en funciones de React (componentes u otros hooks), siempre en el nivel superior del componente (no dentro de bucles, condicionales o funciones anidadas), y comenzar el nombre del hook con 'use' para que React pueda verificar las reglas automáticamente. Un error común es romper la regla de llamar hooks en condicionales, lo que causa bugs difíciles de depurar. Además, los hooks deben ser llamados desde componentes funcionales u otros hooks, no desde funciones JavaScript normales.

• Explica la diferencia entre useMemo y useCallback, y cuándo vale la pena usar cada uno.
  Lo que cubre una buena respuesta

  • useMemo memoriza valores calculados
  • useCallback memoriza funciones
  • dependencias explicitas
  • uso en cálculos costosos o evitar rerenders de hijos con React.memo
  • riesgo de premature optimization

  Ver respuesta de ejemplo

  useMemo memoriza el resultado de una función de cálculo, devolviendo el mismo valor mientras las dependencias no cambien. Se usa para evitar recalcular operaciones costosas en cada render, como ordenar grandes listas. useCallback memoriza una función, devolviendo la misma referencia si las dependencias no cambian. Es útil cuando se pasa una función como prop a un componente hijo memoizado (con React.memo) para evitar rerenders innecesarios. La diferencia principal es que useMemo guarda un valor, mientras que useCallback guarda una función. Vale la pena usarlos cuando el cálculo o la creación de la función es costoso en tiempo/render, o cuando causan rerenders hijos no deseados. Un error común es usarlos sin necesidad, lo que introduce overhead de memoria y dependencias, haciendo el código más complejo sin beneficio.

• ¿Qué causa que un componente se vuelva a renderizar y cómo evitar renderizados innecesarios?
  Lo que cubre una buena respuesta

  • cambios en state/props
  • cambio en el contexto consumido
  • renderizado del padre
  • React.memo
  • useMemo/useCallback
  • uso de key para identidad

  Ver respuesta de ejemplo

  Un componente se vuelve a renderizar cuando cambia su estado local (setState), cuando recibe nuevas props (porque el padre se renderiza y pasa objetos/funciones nuevas), o cuando cambia el valor de un contexto que consume. También se renderiza si su padre se renderiza, incluso si sus props no cambian. Para evitar renders innecesarios se puede usar React.memo en el componente hijo, que hace una comparación superficial de props; combinado con useCallback y useMemo para estabilizar referencias de funciones y objetos. Además, pasar un 'key' estable evita que React reutilice instancias incorrectas en listas. Otra técnica es mover estado interno que no afecte al árbol hacia abajo. Un error común es usar React.memo sin estabilizar las props, anulando la optimización.

• ¿Cómo funciona la prop key en listas y por qué es importante?
  Lo que cubre una buena respuesta

  • identificar elementos de lista
  • efecto en reconciliación (diffing)
  • key estable y única
  • evitar usar índice cuando la lista es dinámica
  • mejora de rendimiento y corrección de estado

  Ver respuesta de ejemplo

  La prop 'key' ayuda a React a identificar qué elementos de una lista han cambiado, se han añadido o eliminado. Durante la reconciliación, React compara las keys para decidir si reutilizar, mover o recrear elementos del DOM, en lugar de renderizar toda la lista de nuevo. Por eso es importante que las keys sean estables, únicas y predecibles entre renders. Usar el índice del array (index) como key es una mala práctica si la lista puede reordenarse, filtrarse o tener elementos insertados/eliminados, porque React asociará el elemento con el índice y puede causar bugs en el estado interno o inputs controlados. Lo ideal es usar un identificador único (por ejemplo, id de base de datos). Una key correcta mejora el rendimiento y evita efectos secundarios en componentes con estado.

• Construye un input de búsqueda con debounce usando un hook personalizado.
  Lo que cubre una buena respuesta

  • custom hook useDebounce
  • manejo de timer con useRef y useEffect
  • estado final después de inactividad
  • configurable delay
  • evitar fugas de memoria con cleanup

  Ver respuesta de ejemplo

  Para construir un input de búsqueda con debounce, podemos crear un hook personalizado 'useDebounce' que recibe el valor a debugear y un delay (por ejemplo 300ms). Internamente, guarda el valor original en un estado local con useState, y usa useRef para mantener una referencia al timer. En un useEffect, cuando el valor original cambia, se limpia el timer anterior y se establece uno nuevo que actualice el estado interno después del delay. El cleanup del useEffect limpia el timer si el componente se desmonta o antes de ejecutar el efecto de nuevo, evitando fugas de memoria. El hook retorna el valor debugeado. Luego, en el componente, se usa ese valor debugeado en otro useEffect para hacer la llamada a la API. La complejidad es O(1) por cada cambio de valor. Un error común es no limpiar el timer al desmontar, lo que puede causar actualizaciones de estado en un componente desmontado.

  import { useState, useEffect, useRef } from 'react';
  
  /**
   * Hook personalizado que devuelve un valor con debounce.
   * @param value Valor a debugear.
   * @param delay Milisegundos de espera.
   */
  export function useDebounce<T>(value: T, delay: number = 500): T {
    const [debouncedValue, setDebouncedValue] = useState(value);
    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  
    useEffect(() => {
      // Limpiar timer anterior si cambia el value (reiniciar debounce)
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
  
      // Nuevo timer para actualizar después del delay
      timerRef.current = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
  
      // Cleanup al desmontar o antes de ejecutar el siguiente efecto
      return () => {
        if (timerRef.current) {
          clearTimeout(timerRef.current);
        }
      };
    }, [value, delay]);
  
    return debouncedValue;
  }
  
  // Ejemplo de uso:
  // const [searchTerm, setSearchTerm] = useState('');
  // const debouncedSearch = useDebounce(searchTerm, 300);
  // useEffect(() => { /* llamar a API con debouncedSearch */ }, [debouncedSearch]);
  // <input value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />

• ¿Cuándo usarías Context versus una biblioteca de estado como Redux o React Query?
  Lo que cubre una buena respuesta

  • Context para estado poco frecuente y árbol pequeño
  • Redux para estado global complejo con devtools
  • React Query para estado de servidor (caching, sincronización)
  • rendimiento: Context provoca rerenders en todos los consumidores
  • separación de preocupaciones

  Ver respuesta de ejemplo

  Usa Context cuando necesites compartir estado entre componentes que están cerca en el árbol, con actualizaciones poco frecuentes (como tema, idioma, usuario autenticado). Context es ligero pero puede causar rerenders en todos los consumidores cuando el valor cambia, por lo que no es adecuado para datos que mutan frecuentemente o en árboles grandes. En cambio, Redux es mejor para aplicaciones grandes con estado global complejo que requiere acciones bien definidas, middlewares y herramientas de depuración (Redux DevTools). React Query está especializado en estado de servidor: caché, sincronización, refetch, mutations, eliminando la necesidad de gestionar manualmente el estado de las peticiones. En general, Context es para estado de UI local (no global) y de baja frecuencia; Redux para estado de aplicación complejo; React Query para datos del servidor. Un error común es usar Context para todo, lo que perjudica el rendimiento.

Cómo prepararse

• Sé capaz de razonar sobre los renderizados en voz alta — a los entrevistadores les importa más tu modelo mental que las APIs memorizadas.
• Practica pequeñas tareas de codificación en vivo (un contador, un input con debounce, un fetch-and-list) hasta que sean automáticas.
• Conoce las ventajas y desventajas de cada herramienta de estado en lugar de elegir una por defecto.
• Menciona herramientas de rendimiento (React DevTools Profiler) al hablar de optimización.

Preguntas frecuentes