Preguntas de Entrevista React

React hooks, componentes, ciclo de vida y mejores prácticas

Preguntas Esenciales de Entrevista React

Domina los conceptos de React que se preguntan frecuentemente en entrevistas. Esta guía cubre hooks, ciclo de vida, Virtual DOM, reconciliación y optimización de rendimiento.

1. Explica el Virtual DOM y la Reconciliación

El Virtual DOM es una representación ligera en JavaScript del DOM real. React lo usa para optimizar las actualizaciones del DOM.

Cómo funciona:

Cambia el estado/props del componente
React crea un nuevo árbol de Virtual DOM
Compara el nuevo árbol con el anterior (algoritmo de diffing)
Calcula los cambios mínimos necesarios (reconciliación)
Actualiza solo las partes cambiadas en el DOM real (batching)

// React optimiza esto:
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Contador</h1>
      <p>{count}</p> {/* Solo esto se actualiza, no todo el div */}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

2. Hook useState - Patrones Comunes

import { useState } from 'react';

// Uso básico
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Juan', age: 30 });

// Actualización funcional (cuando el nuevo estado depende del anterior)
setCount(prevCount => prevCount + 1);

// Estado de objeto - siempre fusionar manualmente
setUser(prevUser => ({
  ...prevUser,
  age: 31 // Solo actualizar age
}));

// Inicialización lazy (computación costosa)
const [data, setData] = useState(() => {
  const initialData = expensiveComputation();
  return initialData;
});

// Múltiples variables de estado vs objeto único
// ❌ Objeto único (causa re-renders innecesarios)
const [state, setState] = useState({
  name: '',
  email: '',
  age: 0
});

// ✅ Variables de estado separadas
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState(0);

// Batching de estado (React 18+)
function handleClick() {
  setCount(count + 1);
  setUser({ name: 'María' });
  // Solo un re-render (batching automático)
}

3. Hook useEffect - Efectos Secundarios

import { useEffect } from 'react';

// Ejecutar después de cada render
useEffect(() => {
  console.log('Componente renderizado');
});

// Ejecutar solo una vez (componentDidMount)
useEffect(() => {
  fetchData();
}, []); // Array de dependencias vacío

// Ejecutar cuando cambian dependencias
useEffect(() => {
  document.title = `Contador: ${count}`;
}, [count]); // Se ejecuta cuando count cambia

// Cleanup (componentWillUnmount)
useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
  
  return () => {
    clearInterval(timer); // Cleanup
  };
}, []);

// Fetch de datos
useEffect(() => {
  let cancelled = false;
  
  async function fetchUser() {
    const data = await fetch(`/api/users/${userId}`);
    if (!cancelled) {
      setUser(data);
    }
  }
  
  fetchUser();
  
  return () => {
    cancelled = true; // Prevenir actualización si se desmonta
  };
}, [userId]);

Mejores Prácticas de React

✓ Usa componentes funcionales con hooks
✓ Mantén componentes pequeños y enfocados
✓ Usa React.memo para componentes costosos
✓ Evita crear funciones inline en renders
✓ Usa keys únicas y estables en listas
✓ Implementa error boundaries
✓ Separa lógica de presentación