Uncaught Error: Minified React error

Thu, Jan 5, 2023

When using React, you may encounter the following 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. This error is caused by the use of dates in the application. The error appears when the browser date and time are not in the same format as the date and time of the server.

How I solved the problem?

Code with the 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>
    );
};

Code without the error

Use the suppressHydrationWarning attribute to avoid the error. This attribute is used to avoid the error when the server and the client render different content. More information about this attribute can be found in the React documentation.

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>
    );
};