САМЫЙ ПОЛЕЗНЫЙ хук для ОПТИМИЗАЦИЙ в React | React Hooks

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

Ссылка на статью про useRef:

Ссылка на видео про дженерики:

Плейлист по TS:

Код из видео:

Таймкоды:
00:00-00:26 - Интро
00:26-01:24 - Что это за хук и как он работает?
01:24-03:15 - Понимаем useRef.
03:15-05:48 - Пример проблемы с рендерами.
05:48-07:52 - Решение через useRef.
07:52-10:35 - Выносим логику в хук useLatest.
10:35-16:16 - useWindowEvent
16:16-20:01 - useEvent
20:01-21:30 - useIsMounted
21:30-26:06 - usePrevious
26:06-29:36 - Кастомная проверка deps у хуков - проблема
29:36-33:02 - Кастомная проверка deps у хуков - решение
33:02-35:02 - useCustomCompare
35:02-35:27 - Заключение

[narek]

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

[difficultdo]

Очень хорошая подача информации, в темпе и ничего лишнего. Спасибо, было интересно посмотреть.

[fedordostoevskiy]

👍👍👍, я столько смотрел предыдущий плейлист, что в этот раз всё понял с первого раза😂😂😂

[alekseyleha]

Спасибо, Аюб. Буквально в пятницу колхозил свой useWindowEvent, но немного спотыкнулся, а тут твоя неотложная помощь, очень к месту)

[rmozxuk]

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

[rmozxuk]

Очень полезно. Спасибо) И качество подачи сильно выросло.

[alexandrtaushkanov]

Очень крутой и полезный контент, не останавливайся, подписота будет расти :)

[block]

Такое ощущение, что подача изменилась, стала такой размеренной и более спокойной.

[dwlblcu]

очень актуальное видео
уверен что многие использовали реф только для доступа к отрендеренным элементам
примеры хорошие и реалистичные

[artyomtaranenko]

Хороший контент, раз такое дело, мб про Next серию роликом))

[fastandfurious]

Недавно наткнулся на проблему с собственноручно написанным дебоунсом. Суть в том, что колбэк в дебаунсе постоянно подхватывал значения стэйта предыдущего рендера. Пришлось лезть в библиотеку use denounce и смотреть как ребята решили эту проблему. Долго не мог и там понять, а оказалось нужно было использовать реф😂😂. Спасибо за глубокий контент!!! ❤

[SuccessMoron]

Отлично! Когда-то начну писать на React, пока только VUE)

[kolyunchikable]

Материал очень полезный, но ты быстро говоришь, тяжело воспринимать такую насыщенную инфу в таком темпе, по крайне мере мне как начинающему. Хотя раньше еще быстрее говорил и скакал по коду, прогресс с предыдущими виде налицо! Спасибо за труд, продолжай в том же духе, Аюб!

[lord]

Самое простое действие для оптимизации, это вынести логику из компонента 😊

[fjfwtui]

Спасибо за видео ! ОЧень информативно) Только есть один вопрос, не совсем понял почему на 18 минуте мы возвращаем реф через apply. Есть какие-то кейсы, где колбэк может случайно взять какой-то this ?

[maratgrigoryan]

Подскажите пожалуйста, почему в массив зависимостей для useLayoutEffect в хуке useLatest не добавить value? Это сделано специально для каких-то кейсов?

[wtsqomc]

Очень хочется чтобы Айюб, говорил с паузами между предложениями. Потому что в процессе хочется подумать, о сказанном, а иногда просто не успеваешь 🥺🥺🥺

[kirillpodolinniy]

Аюб, добрый вечер) Спасибо большое за видео)
Есть вопрос!
В доке реакта такая информация написанна про useRef
"Do not write or read ref.current during rendering.

React expects that the body of your component behaves like a pure function:

If the inputs (props, state, and context) are the same, it should return exactly the same JSX.
Calling it in a different order or with different arguments should not affect the results of other calls.
Reading or writing a ref during rendering breaks these expectations."

А мы в первом примере делаем это во время рендера, где тут правда и как разобраться? Спасибо)

[AlexanderOsnovnoi]

Есть ощущение, что пример с неконтролируемыми input, немножко "сферический в вакууме". Необходимость в использовании именно неконтролируемых полей возникает достаточно редко, но в целом очень хороший урок

[uktjqnq]

Большое спасибо за твои видео. У меня возник вопрос по поводу хука useIsMounted. Почему в нем не использовать useLayoutEffect?