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

Concurrent Mode позволяет React выполнять работу по приоритетам, что позволяет приложениям оставаться отзывчивыми и отображать актуальное состояние, даже если есть много работы, которую нужно выполнить. Он позволяет React эффективно распределять ресурсы и обрабатывать обновления компонентов без блокировки пользовательского интерфейса.

1. Приоритеты: определяет приоритеты работы и позволяет выполнять задачи в соответствии с этими приоритетами. Это позволяет приложениям оставаться отзывчивыми и предоставлять лучший пользовательский опыт.
2. Приостановка и возобновление: позволяет приостанавливать выполнение работы, если она не является необходимой для отображения актуального состояния пользовательского интерфейса. Это позволяет более эффективно использовать ресурсы и улучшает производительность приложений.
3. Отмена: Concurrent Mode позволяет React отменять работу, которая была запланирована, но больше не требуется. Это особенно полезно для обработки пользовательских действий, которые могут быть отменены или заменены другими действиями.

**Как переключить проект в Concurrent Mode ?

Конкурентный режим— это именно режим, поэтому его потребуется включить. Как тумблер, который заставляет Fiber работать на полную мощность. С чего же начать?

Убираем легаси. Избавляемся от всех устаревших методов в коде и убеждаемся, что их нет в библиотеках. Если приложение без проблем работает в React.StrictMode, то всё в порядке — переезд будет простым. Потенциальная сложность — проблемы внутри библиотек. В этом случае нужно либо перейти на новую версию, либо сменить библиотеку. Или же отказаться от конкурентного режима. После избавления от легаси останется только переключить root.

С приходом Concurrent Mode будет доступно три режима подключения root:

• Старый режим
  ReactDOM.render(<App />, rootNode)
  Рендер после выхода конкурентного режима устареет.
• Блокирующий режим
  ReactDOM.createBlockingRoot(rootNode).render(<App />)
  В качестве промежуточного этапа будет добавлен блокирующий режим, который даёт доступ к части возможностей конкурентного режима на проектах, где есть легаси или другие трудности с переездом.
• Конкурентный режим
  ReactDOM.createRoot(rootNode).render(<App />)
  Если всё хорошо, нет легаси, и проект можно сразу переключить, замените в проекте рендер на createRoot — и вперёд в светлое будущее.

Назад