Un desajuste significa que el HTML renderizado en el servidor no coincide con el primer render del cliente. Las causas habituales son fechas y formato según el idioma, valores aleatorios, leer window o localStorage durante el render, y anidamiento HTML inválido que el navegador repara en silencio. Lee el diff que registra React para encontrar el nodo y luego mueve el valor a un efecto para que el primer render coincida, o renderiza esa parte solo en el cliente.
Por qué lo preguntan los entrevistadores
Los errores de hidratación son un rito de paso para cualquiera que haga renderizado en servidor, y la respuesta demuestra si lo has llevado a producción. El entrevistador quiere un enfoque sistemático y no un encogimiento de hombros con un suppressHydrationWarning. También comprueba si sabes por qué importan los desajustes, ya que React descarta el marcado del servidor para ese subárbol y puede dejar manejadores de eventos enganchados a los nodos equivocados.
Cómo estructurar tu respuesta
- Define el desajuste como HTML del servidor frente al primer render del cliente.
- Enumera los sospechosos habituales por orden de probabilidad.
- Describe cómo lo acotas a partir del diff registrado.
- Da los arreglos correctos y cuándo es aceptable suprimir el aviso.
Ejemplo de respuesta
Primero leo bien el error, porque React 19 te da un diff decente que muestra qué nodo difería, y eso normalmente basta para señalar al culpable. Luego repaso a los sospechosos. Lo primero es cualquier cosa basada en el tiempo, como una fecha formateada o una marca temporal relativa renderizada en el servidor en un segundo y en el cliente en otro. Después el formato de idioma y zona horaria, porque el servidor casi siempre está en UTC. Luego ids aleatorios o Math.random dentro de un componente. Después cualquier cosa que lea window, matchMedia o localStorage durante el render, algo común con los selectores de tema. Y por último el anidamiento inválido, como un div dentro de un p, donde el navegador arregla el HTML antes de que React lo vea. El arreglo depende de cuál sea. Para valores que solo existen en el cliente renderizo un marcador estable en el servidor y pongo el valor real en un efecto, o cargo esa pieza de forma diferida con el renderizado en servidor desactivado. Solo recurro a suppressHydrationWarning en una hoja concreta, como una marca de tiempo, nunca en un contenedor.
¿Tienes esta entrevista a la vuelta de la esquina? GhostPilot escucha tu llamada en vivo, detecta la pregunta en cuanto la hacen y pone una respuesta estructurada en tu pantalla en tiempo real. Pruébalo en tu próxima entrevista de práctica, o coge un Session Pass de $29, sin suscripción, para la de verdad.
Mira cómo funcionaPreguntas de seguimiento que puedes esperar
- ¿Por qué un desajuste de hidratación es peor que un simple aviso en consola?
- ¿Cómo manejarías un selector de tema que lee localStorage?
- ¿Qué hace React con el HTML del servidor de un subárbol que no coincidió?
Más preguntas para Desarrollador React
Tu entrevistador hará su propia versión de esta. Pega la descripción real del puesto en el Question Predictor gratuito y obtén las 20 preguntas que ese puesto tiene más probabilidades de hacerte, con lo que cada una busca en realidad.
Predecir mis preguntas