Что такое управление потоком в режиме строгого соблюдения React?

Какой будет результат выполнения следующего компонента в режиме строгой проверки React?

import { useEffect } from "react";

export default function Learn() {
    let x = 1;
    console.log("снаружи ", x)
    useEffect(() => {
        console.log(x);
        x = 2;

        return () => console.log("разрушение", x)
    }, []);
    console.log("конец функции ", x)
    return (
        <>
            <p>значение = {x}</p>
        </>
    );
}

Я запустил это на своем компьютере и получил

снаружи  1
конец функции  1
снаружи  1
конец функции  1
1
разрушение 2
2

Но я не могу понять, почему. По моему разумению, это должно было быть

снаружи 1
конец функции 1
1
разрушение 2
снаружи 1
конец функции 1
1

Что я предполагал (неправильно), так это то, что режим строгой проверки React будет:

1. Начнет добавлять компонент в виртуальный DOM.
2. Как только монтирование завершено, он вызовет хук useState.
3. повторяет (1) и (2) снова.

Но этого здесь не происходит. Так что же здесь происходит?

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

Ожидаемый порядок выполнения
Режим строгой проверки React преднамеренно вызывает компоненты дважды во время разработки, чтобы помочь выявить проблемы с побочными эффектами. Давайте рассмотрим каждый шаг:

Первоначальный рендер – Первый вызов

let x = 1;: Инициализирует x равным 1.
console.log("снаружи ", x);: Логирует снаружи 1.
console.log("конец функции ", x);: Логирует конец функции 1.

Компонент рендерится со значением = 1.
useEffect выполняется после завершения этого рендера.
Выполнение эффекта (Первый вызов)

console.log(x);: Логирует 1.
x = 2;: Меняет x на 2.
return () => console.log("разрушение", x);: Настраивает функцию очистки для логирования 

разрушения и текущего значения x, когда компонент размонтируется или перерендерится.
Размонтирование (Первый вызов)

Функция очистки выполняется как часть поведения режима строгой проверки, логируя разрушение 2.
Повторное монтирование (Второй вызов)

React повторно монтирует компонент с нуля, чтобы смоделировать новое начало:

let x = 1;: x сбрасывается на 1.
console.log("снаружи ", x);: Логирует снаружи 1.
console.log("конец функции ", x);: Логирует конец функции 1.
Компонент снова рендерится со значением = 1.

Выполнение эффекта (Второй вызов)

console.log(x);: Логирует 1.
x = 2;: Снова меняет x на 2.
return () => console.log("разрушение", x);: Настраивает новую функцию очистки для логирования 

разрушения и текущего значения x, когда компонент размонтируется или перерендерится.

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