ДЖАВАСКРИПТИЗЕРЫ | КИРИЛЛ ПОЗДНЯКОВ

Не все понимают что такое Конкурентный режим в React 18



Для начала: что это такое ?

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



Вот хуки которые работаеют с Конкурентным режимом:

useTransition ➡️ хук, который задерживает обновление компонента до тех пор, пока данные полностью не загрузятся и убирает промежуточное состояние загрузки. Это нужно для того, чтобы избежать нежелательной миграции между состояниями и улучшить визуальный опыт пользователя. Когда происходит загрузка данных при действии пользователя, обычно используется лоадер или скелетон. Однако, если данные загружаются очень быстро, то лоадер может мгновенно исчезнуть, и обновленный компонент начнет рендериться. В таких случаях лучше не показывать лоадер вовсе.



useDeferredValue ➡️ в конкурентном режиме умеет возвращать отложенную версию значения, показывать устаревшие данные вместо мигающего лоадера или fallback во время загрузки. Этот хук принимает значение, для которого мы хотим получить отложенную версию, и задержку в миллисекундах.



В целом очень удобная вещь, которая помогает сделать приложение более производительным, ведь сейчас имея доступ к тому что у нас будет рендериться первым, а что последним, мы можем сделать поистине производительные приложение



🔥 Накидайте очень и очень много огней и я буду делать наконец-то ролик по всему React 🔥