createRef, setRef, useRef и зачем нужен current в ref

Когда в React ввели createRef у меня к нему было много вопросов на тему что такое current и зачем он вообще нужен. И как видите пришли хуки, а current все так же с нами. Думаю настало время разобраться, зачем он вообще нужен !?

Поддержать Айти Синяка можно здесь:

00:00 Анонс темы
00:27 пример setRef
01:08 недостатки createRef
02:12 исходники createRef
02:40 знакомство с commitAttachRef
03:29 общий сценарий работы createRef
04:08 изучаем 2-ой рендер
05:47 подставим createRef вместо useRef
06:45 исходники useRef()
07:25 createRef() vs useRef()
09:23 пробуем обнулять current
09:46 пробуем обновлять объект
10:14 идеология использования current
11:25 благодарность
11:50 подписывайтесь!

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

[bo_ver]

Очень интересно, именно сегодня я делал таск с Intersection Observer, используется конечно же ref. Так вот, активные элементы не успевали поменяться, изза того, что Ref-ы в Dev-mode, делают кучу проверок, а на Prod-режиме только 3 строчки кода. Сделал Build, на проде все просто летает) Очень рад, что наткнулся на ваш канал, спасибо!)

[sergei_sergeevu]

Как всегда крайне полезный контент) Спасибо!

[alexandrryzhenkov]

читал вашу статью, решил видосик глянут, а тут снова вы).. Замечательный стил. спБ

[raufhashimov]

Давайте уроки по другим технологиям связанным с React.Redux-saga, nextjs, axios (углубленно) . Контент на уровне бога as always

[oleawonder]

Спасибо тебе за полезные и красивые видео! Контент и подача офигенные. Заглядываю на канал все чаще и чаще :)

[Armasn]

Как раз задавался вопросом, зачем был придуман useRef, если есть React.createRef. Это видео являет собой идеальный ответ на этот вопрос, спасибо!

[mikhailstepanischev]

Очень полезный выпуск, спасибо ! createRef, setRef, useRef

[yjoqkil]

То что надо спасибо! ждём продолжения 👍

[AlexanderEmashev]

Ух, вот действительно есть что переварить! Спасибо!

[golden_smiles]

Через два года - Очень полезный выпуск, спасибо ! - Все понятно? А теперь забудьте все это )))

[andreyshevchenko]

Супер материал, очень глубоко и интересно. Сам правда использую ref в очень редких случаях..

[hannakhvistsik]

Спасибо большое за полезный контент!
Есть одно маленькое замечание, на 10.47 есть пример с помещением ref.current в зависимости useEffect. Только такой код не будет работать так, как ожидается. При изменении current, хук useEffect не вызовется. В блоге epicreact когда-то читала хорошую статью на этот счет "Why you shouldn't put refs in a dependency array".
Ну и добавлю пример кода компонента для проверки:)
function Counter() {
const countRef = React.useRef(0)
React.useEffect(() => {
console.log(countRef.current)
}, [countRef.current])
const increment = () => (countRef.current += 1)
return <button onClick={increment}>Click me</button>
}

[STELLS]

Видосы оч крутые и информативные.
Как раз пример из жизни - на пет-проекте с сортировкой/фильтрацией и пагинацей на фронте возник затуп, что есть реселектор, где беру использую значение из предыдущего реселектора, которой как-то сортирует данные и потом слайсом нарезаю данные для пагинации.
При сортировке, данные из селектора, которые делает слайс не сортируются, хотя в селекторе выше все ок.

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

[trueman]

Привет! спасибо за видео :)
Хотел уточнить один момент с 6:03, когда используем createRef() в функциональных компонентах.
Может ли быть все гораздо проще? например дело в том, что при использовании в классовых компонентах есть два жизненных цикла: Creation Lifecycle и Update Lifecycle. При первом рендере у нас Creation Lifecycle в котором вызывается метод constructor в котором мы и вызываем createRef единожды. При Update Lifecycle метод createRef больше не вызывается, т.к. не вызывается constructor. В Функциональном компоненте при изменении стейта ререндерится весь компонент и createRef вызывается по новой, т.к. нет такой логики мемоизации как у хука useRef()

[rnablack]

Спасибо большое за ваши видео! Очень полезные! Внесу небольшое пожелание, так сказать, хотелось бы ещё увидеть разбор паттернов проектирования и применение их вкупе с реактом 😊 upd: судя по комментариям я не одна такая 😅

[SemenAlexndrovich]

Просто отличный канал! Спасибо большущее

[Quentinrei]

Госпади, это как узнать в 30 лет что-то очевидное из детства. Очень крутой ролик. Повторяю материал для собеса, когда получу оффер - 100% отплачу

[Ramosok]

Очередное бомбическое видео!!! Спасибо!

[npa]

Максимально круто!!! Спасибо за вашу работу!)

[fx-ryiu]

Спасибо за урок! Подскажите, пожалуйста, что значит вертикальная чертка в 85 и 87 строках на 4:01