Нестандартное применение хука useInsertionEffect | React

В данном видео я поделюсь немного не стандартным применением хука useInsertionEffect для обновления ваших рефов. Разберем, почему нужно обновлять рефы внутри эффектов, как работает сам хук useInsertionEffect, и почему я советую использовать именно его для этой задачи.

Telegram-канал:

Видео про хук useLatest:

Видео про колбэк-рефы:

Код из видео:

Таймкоды:
00:00 - Интро
00:20 - Где я нашел применение хуку useInsertionEffect?
01:16 - Для чего нужен хук useLatest?
03:41 - Почему нельзя обновлять ref без эффекта?
05:08 - Смотрим на схемы рендеринга React
06:03 - Почему нельзя использовать useLayoutEffect?
07:31 - Пример, где useLayoutEffect поведет за собой баги
10:36 - Для чего задумывался хук useInsertionEffect?
12:08 - Флоу рендеринга компонентов с хуком useInsertionEffect
12:56 - Заключение

[artyomtaranenko]

Оч интересно, ты рассказываешь о вещах, о которых я даже не задумывался и не сталкивался, но теперь я знаю - где искать в случае необходимости))

[AmericanDragon]

Вот это совсем другое дела, 13 минут ) отлично обязательно посмотрю сегодня) я тоже из Ташкента брат

[АнатолийГорбов-оь]

Отлично! Мега полезный канал, спасибо!

[v.demchenko]

Отлично обьяснил. С этими рисунками прям топ. Ну и в целом, типа проблема, до и после, и зачем придумалм.

Круто🎉🎉

Все понятно

[KloooKiNgH]

Спасибо за урок!
Можешь записать видео на тему "Таблица React с нуля", где реализовать таблицу с сортировкой, поиском, адаптивностью, было бы полезно)

[Владимир.П-ео]

3:45 что-то непонятно все равно. Если значение не было применено в рендере, ну и фиг с ним, мы же хотим получить последнее значение из react-рендера, а не значение предыдущего фактического рендера.
Еще непонятно, что будет, если хук useLatest будет находиться ниже, чем совсем другой useInsertionEffect (для нужд компонента), выходит useInsertionEffect вызовется раньше, а значит, внутри себя будет содержать неактуальное значение useLatest. С рендером такой проблемы нет, т.к. ты не можешь использовать переменную до ее объявления, а во всякие эффекты точно попадет актуальное значение.

Реакт со своим Concurrent Mode все усложили и запутали людей.

[kirillpavlovskii]

update DOM в flow это update виртуального дома ?

[AndreyEricksonGame]

Если честно, в конце нихера не понятно (12:17). Что значит 'Создаются DOM-ноды'?) Мне всегда казалось, что Реакт работает так:
- Вызывается компонет, то есть как бы 'рендерится'. Хотя там просто вызывается обертка, которая отправляет JSX в функцию, для его преобразования.
- Затем JSX-верстка этого компонента преобразуется в обычный объект
- И уже на основании этого объекта (вся информация, которая хранится в нем) коммититься в реальный DOM.
И поэтому вопрос, что за создание DOM-нод, если уже Layout Effects вызывается до того, как React начнет коммитить всю информацию из VDOM в реальный DOM?
Возможно в видосе опечатка, но нужно отличать Node, которые создает сам React от браузерных Node.