¿Qué significa el error Minified React error #425?

Es un error de hidratación: el texto renderizado en el servidor no coincide con el renderizado en el navegador. Suele estar causado por fechas, horas o valores dependientes del idioma que difieren entre ambos entornos.

Cómo arreglar Minified React error #425 (error de hidratación)

Q: ¿Cómo se arregla el error Minified React error #425?

Añade el atributo suppressHydrationWarning a los elementos cuyo contenido difiere legítimamente entre servidor y cliente, o renderiza ese valor solo después de que el componente se haya montado en el cliente.

Respuesta rápida

El error #425 de React ("Text content does not match server-rendered HTML") es un desajuste de hidratación: el servidor renderizó un valor y el navegador otro, normalmente una fecha o una hora. La solución más rápida es añadir el atributo suppressHydrationWarning al elemento cuyo texto difiere legítimamente entre servidor y cliente, o renderizar ese valor solo cuando el componente ya se ha montado.

Al usar React, puede encontrar el siguiente error: Uncaught Error: Minified React error visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. Este error es causado por el uso de fechas en la aplicación. El error aparece cuando la fecha y la hora del navegador no tienen el mismo formato que la fecha y la hora del servidor.

¿Cómo resolví el problema?

Código con el error

DateAndHour.tsx

const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);
    return (
        <div className={styles.dateAndHour}>
            <span>{day}</span>
            <span>{dayNumber}</span>
            <span>{month}</span>
            <span>{hour}</span>
        </div>
    );
};

Código sin el error

Utilice el atributo suppressHydrationWarning para evitar el error. Este atributo se usa para evitar el error cuando el servidor y el cliente presentan contenido diferente. Puede encontrar más información sobre este atributo en la documentación de React.

DateAndHour.tsx

const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);
    return (
        <div className={styles.dateAndHour}>
            <span suppressHydrationWarning>{day}</span>
            <span suppressHydrationWarning>{dayNumber}</span>
            <span suppressHydrationWarning>{month}</span>
            <span suppressHydrationWarning>{hour}</span>
        </div>
    );
};