React, React Hooks, Diffrent console.log порядок печати внутри useEffect

Question

Я получаю два разных порядка отпечатков console.log в зависимости от того, использую я обещание или нет.

Состояние:

let [data,setData] = useState(1);

При использовании обещания:

let asyncFunk = async () => {
      return "Asd";
    };

    useEffect(() => {
        asyncFunk().then((result) => {
            console.log("BEFOR SET DATA " +data);
            setData(prev => prev +1 );
            console.log("AFTER SET DATA " +data);
        });
    },[]);

    return (
       <div>
            {console.log("Data in return " + data)}
        </div>
    );
}

Порядок печати console.log таков:

Data in return 1
BEFOR SET DATA 1
Data in return 2
AFTER SET DATA 1

Таким образом, при нажатии setData () компонент повторно визуализируется, и console.log из возвращаемого значения вызывается ДОconsole.log после setData ().

Когда я удаляю асинхронную функцию:

 useEffect(() => {
            console.log("BEFOR SET DATA " +data);
            setData(prev => prev +1 );
            console.log("AFTER SET DATA " +data);
    },[]);
    return (
        <div>
            {console.log("Data in return " + data)}
        </div>
    );
}

Порядок печати console.log:

Data in return 1
BEFOR SET DATA 1
AFTER SET DATA 1
Data in return 2

КогдаАсинхронная функция удаляется, сначала useEffect завершает работу, а также печатает старое значение состояния, а затем печатается console.log из возвращаемого значения.

Любая идея, что происходит здесь и почему это происходитпорядок распечатки происходит?

Answer 1

Это реализация React.

Пожалуйста, посмотрите на этот ответ , где он говорит.

TL; DR - если состояние изменяетсязапускаются асинхронно (например, в обещании), они не будут упакованы;если они запускаются напрямую, они будут группироваться.

И если вы посмотрите на комментарий Дана Абрамова , там написано

ВВ текущем выпуске они будут объединены вместе, если вы находитесь внутри обработчика событий React.
...
В текущей версии несколько setStates вне обработчиков событий (например, в сетевых ответах) не будут объединены. Таким образом, вы получите два повторных рендера в этом случае.
...

Итак, что происходит, где ожидаемый результат.