Почему в консоль выводится по два сообщения за раз?

Question

Учу React третий день и столкнулся с вопросом почему у меня в консоль выводит дату по два раза за раз? Почему то что в функции useEffect выполняется два раза?

import React, {useEffect, useState} from 'react';

const Clock = () => {

    function getDate() {
        const now = new Date();
        const day = now.getDate()
        const month = now.getMonth() + 1
        const year = now.getFullYear()
        return {day, month, year}
    }

    const [time, setTime] = useState(new Date().toLocaleTimeString())
    const [today, setToday] = useState(getDate())

    useEffect(() => {
        setInterval(() => {
            setTime(new Date().toLocaleTimeString())
        }, 1000)
    })

    useEffect(() => {
        setInterval(() => {
            setToday(getDate())
            console.log(today)
        }, 1000)
    })

    return (
        <div>
            <div>{time}</div>
            <div>{today.day} </div>
        </div>
    );
};

export default Clock;

Answer 1

Вы запускаете приложение в режиме StrictMode. Перейдите к index.js и закомментируйте тег строгого режима. Тогда вы увидите сообщение один раз.

Измените

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

на

root.render(
    <App />
);

Это происходит из-за преднамеренной функции React.StrictMode. Такое поведение происходит только в режиме разработки и должно помочь найти случайные побочные эффекты на этапе рендеринга.

Из документации:

Строгий режим не может автоматически обнаруживать побочные эффекты, но может помочь вам обнаружить их, сделав их немного более детерминированными. Это делается путем преднамеренного двойного вызова следующих функций:...

^^^ В данном случае useEffect.

Официальная документация о том, что может вызвать повторный рендеринг при использовании React.StrictMode:

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Где то видел даже открытый CR на эту тему, но ссылки нет под рукой.

Вам же рекомендую useEffect с одним набором зависимостей объединить в один:

useEffect(() => {
    setInterval(() => {
        setTime(new Date().toLocaleTimeString())
    }, 1000);
    setInterval(() => {
        setToday(getDate())
        console.log(today)
    }, 1000)
}, []);

БЛОГ НА HUSL

Почему в консоль выводится по два сообщения за раз?

Ответы (1 шт):