В React, если рендеринг отменён, будут ли всё равно выполняться useEffect и очищаться?

Я пытаюсь понять семантику отвергнутых рендеров, которые, как я понимаю, могут происходить в конкурентном режиме.

Я бы ожидал, что если рендер отвергнут, то ни один из useEffect() не будет вызван. Во-первых, потому что useEffect() должен выполняться после коммита, а во время коммита рендер по определению не отвергается.

Это так, или useEffect() также выполняется в случае отвергнутых рендеров?

Это может быть так, а может и нет, но не стоит полагаться на это поведение, так как то, как это работает сейчас, может измениться в будущих версиях React. Документация намеренно неопределенна (https://react.dev/reference/react/useEffect#useeffect, обратите внимание на “обычно” и “может”):

• Если ваше действие не было вызвано взаимодействием (например, нажатием), React, как правило, сначала позволит браузеру отрисовать обновленный экран, прежде чем запустить ваше действие.
• Если ваше действие вызвано взаимодействием (например, нажатием), React может запустить ваше действие до того, как браузер отрисует обновленный экран.

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

Ты почти прав, дружище, но я расскажу, как это работает.

В конкурентном режиме рендер может быть отвергнут, если состояние компонента изменилось до того, как рендер был зафиксирован в DOM. Основная цель – оптимизация (это логично, зачем делать ненужные обновления).

Теперь хук useEffect выполняется только после того, как компонент зафиксирован в DOM. Он выполняется после завершения цикла рендеринга, что означает, что все обновления в DOM завершены.
Поскольку это так, useEffect не будет выполнен для отвергнутых рендеров. Если рендер отвергнут, любые эффекты, связанные с этим рендером, также не будут выполнены.

Надеюсь, этот ответ поможет тебе

Позволь мне объяснить мои художественные навыки, если хочешь, лол. Я назову это диаграммой
useEffect Жизненного Цикла в Конкурентном Режиме.

+----------------------------+
|    Фаза Начального Рендера  |
+----------------------------+
| 1. Начать рендеринг        |
| 2. React создает виртуальное |
|    представление DOM       |
|                            |
| 🛑 Примечание: `useEffect`  |
|    НЕ выполняется здесь     |
+----------------------------+
          |
          v
+-----------------------------+
|    Проверка Конкурентного   |
|        Режима              |
+-----------------------------+
| React может решить         |
| отвергнуть этот рендер, если:|
|  - Приходят новые props/state|
|  - Работа с более высокой   |
|    приоритетом прерывает    |
+-----------------------------+
          |
          | Рендер отвергнут
          |
          v
+-----------------------------+
|    Фаза Отвергнутого Рендера|
+-----------------------------+
| React отвергнул этот рендер |
| потому что он устарел или   |
| ненужен.                   |
|                            |
| 🛑 `useEffect` НЕ выполняется|
|     для отвергнутых рендеров.|
|                            |
| ✔️ Очистка не нужна,        |
|     так как `useEffect` не   |
|     был вызван.             |
+-----------------------------+
          |
          | Если рендер НЕ отвергнут
          v
+-----------------------------+
|      Фаза Коммита          |
+-----------------------------+
| Рендер завершен и          |
| зафиксирован в DOM.        |
|                            |
| ▶️ `useEffect` выполняется здесь.|
|                            |
| 🔄 Если есть существующий   |
|     эффект, очистка от      |
|     предыдущего рендера      |
|     выполняется сначала      |
|     перед запуском нового    |
|     эффекта.                |
+-----------------------------+

В Конкурентном Режиме отвергнутые рендеры не триггерят useEffect, следовательно, очистка не требуется. useEffect выполняется только после того, как рендер фактически зафиксирован в самом DOM.