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

[@Retruntobase]

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

[@Armas0n]

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

[@it-sin9k]

Я для себя пытался ответить на этот же вопрос) Рад, что кому-то это тоже полезно)

[@alexryzhenkov271]

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

[@it-sin9k]

Добро пожаловать на канал :)

[@sergei_sergeevu4]

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

[@golden_smiles]

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

[@it-sin9k]

никогда не поздно)

[@nikitakurochka2752]

Материал очень зашел )))

[@Elator11777]

Топ, топ, как всегда!

[@illyakyrylov]

Отличный ролик! Давайте ещё 😅

[@it-sin9k]

Сегодня как раз закончил аудиодорожку записывать к след выпуску)

[@raufhashimov241]

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

[@it-sin9k]

судя по голосовалке в твитере, люди хотят дальше послушать про патерны :)

[@hannakhvistsik7230]

Спасибо большое за полезный контент! Есть одно маленькое замечание, на 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 Click me }

[@it-sin9k]

Спасибо за комментарий! Не совсем так. Изменение ref не вызывает новый рендер в отличии от useState. Когда произойдет рендер по какой-либо другой причине useEffect выполнится, так как в зависимостях пришло новое значение. Попробуйте поиграться с этими счетчиками: codesandbox.io/s/naughty-ramanujan-kucr95?file=/src/App.js

[@STELLS541]

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

[@it-sin9k]

вот это хорошо прокачался)

[@STELLS541]

@@it-sin9k , а такой момент ещё, а можно ли/нормальная практика, что в сложных селекторах, которые делаем через реселект, указывать в зависимостях те селекторы, которые не используются, но за которыми надо смотреть, когда они изменяется? Условно, есть массив данных, которые как-то фильтруется и сортируется, а потом слайсом режу его для пагинации на фронте, но сортированный массив видимо из-за мемоизации в реселект не приходит в слайс, и слайс не обновляется. А если указать в зависимостях, что надо смотреть за селектором сортировки, то все работает ок.

[@it-sin9k]

кажется что скорее так себе практика чем хорошая) по идее параметр сортировки, фильтр и массив данных хранятся в redux. А значит и используются как зависимости, значит и проблемы не должно быть

[@vvadimvoit7704]

Контент супер! Автор большой молодец)

[@it-sin9k]

Спасибо!

[@oleawonder]

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

[@it-sin9k]

Спасибо!) можете поддержать наш канал поделившись этим видео с коллегами)

[@НикитаГончаров-е8ш]

Топ🔥🔥🔥

[@AlexanderEmashev]

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

[@it-sin9k]

Всегда пожалуйста!)

[@ИльгизШарафутдинов-ю4ц]

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

[@it-sin9k]

Рады быть полезными)

[@trueman8413]

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

[@it-sin9k]

Да, все верно. У компонента нет возможности разделить код, этот для первого вызова, а этот для последующих. Поэтому createRef и не подойдет для функционального компонента

[@andreyshevchenko4602]

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

[@it-sin9k]

думаю после следующего видео будете на порядок чаще)

[@Quentinrei]

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

[@it-sin9k]

Удачи на собеседовании!

[@fx-ry5iu]

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

[@it-sin9k]

Это типы так пишутся, не помню какой инструмент они используют, но это не TS

[@ДаниярКаби]

Большое спасибо, ты крут !

[@it-sin9k]

Спасибо!

[@mikhailstepanischev8316]

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

[@bulatkhisamov8933]

Спасибо!

[@zakiro4277]

крутой формат видео!

[@it-sin9k]

Спасибо! Мы очень старались :)

[@rnablack2695]

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

[@it-sin9k]

Спасибо :) Ваше желание для меня закон, ловите пару видео на тему паттернов! kzbin.info/www/bejne/bIS2imVshNGGbKc

[@rnablack2695]

@@it-sin9k спасибо большое ☺️

[@rnablack2695]

@@it-sin9k эх, был бы у меня такой лид как вы в команде, жизнь была бы проще 😖

[@it-sin9k]

Спасибо)) Из моего опыта, с хорошим лидом, можно вообще быстро прокачиваться) Поэтому всегда присматривайтесь в первую очередь к интересным людям. С ними даже не интересный проект может превратиться в увлекательный проект)

[@ВладиславПузырев-ю8л]

Очень крутой материал, спасибо

[@it-sin9k]

Спасибо!) будем очень благодарны, если расскажите о нас коллегам :)

[@Ramosok]

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

[@HannaPanasiuk-b8j]

Дякую

[@serglandishev9286]

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

[@illiazolotarov8766]

Я немного не понял. Так всё же почему в классовых createRef при изменении стейта не выводит attach... , а когда его же используем в функциональной компоненте то выводит? Классовый компонент и функциональный как то по другому реагирует на тот самый createRef? Понятно из видео что да, но я не уловил момент почему.

[@it-sin9k]

Идея в том, что в классовом компоненте createRef() вызывается лишь один раз. И дальше мы работаем с одним и тем же объектом все время. А в случае использоваться createRef() в функциональном компоненте, он на каждый рендер вызывается и каждый рендер создает новый объект { current: null }. В attach смотрят, пришла новая ссылка, значит надо опять приатачить.

[@npa040493]

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

[@it-sin9k]

Спасибо!) Мы очень стараемся!)

[@viktorsoroka4510]

Так если current равняется any это же значит что там тот же null может быть. И тогда например проверка перед вызовом this.current.focus() может быть нужна. Сталкивался на проекте с моментам когда проверка точно была нужна.

[@it-sin9k]

Да, все верно. Вопрос на проверку null возникает в некоторых кейсах. Но если у вас один компонент например он всегда возвращает инпут, и вы взяли от него ref. То проверять current на null избыточно. С другой стороны, если вы объявили ref у родительского компонента и инпут то есть, то его нет, тогда конечно нужно проверять на null

[@viktorsoroka4510]

Ещё иногда встречаю кейсы когда из контекстов может получаться что компоненты маунтятся несколько раз и происходит потеря рефов и вообще ведут себя странно. У вас были такие случаи?

[@it-sin9k]

Хмм, нет, таких кейсов вспомнить не могу в моей практике. В большинстве случаев это достаточно предсказуемый инструмент. Единственные проблемы, которые я встречал, это использование ref в хуках + hot reload. В итоге при изменениях ref имел кривое значение и падал частично с ошибками. Но есть предположение, что hot reload был криво настроен для работы с хуками

[@СергейУстинов-ф3щ]

Планируются ли какие то платные курсы, реализация какого то большого проекта ? Уже пора ))

[@it-sin9k]

есть идеи что можно создать) но пока времени не хватает все это сделать) Но мы очень постараемся)

[@it-coding]

Приветствую ) Столкнулся с проблемой , и решение ее не очень нравится У меня экран когда начинает рендериться, у меня стоит проверка на поля есть новые и старые, сделал через useRef и идет сравнение и перезапись, но проблема, что экран не просто ререндерится , и я сохраняю старые данные, а он похоже что заново монтируется, и всегда значение Рефоф дефолтные , выход нашел с помощью объекта вне Компонента , так все работает норм! Возможно есть еще варианты на примете ?

[@it-sin9k]

варианты всегда есть) Но для этого надо хорошо понимать ситуацию. Можете сбросить codesandbox.io/ пример кода, попытаемся его доработать. Ссылки скорей всего сбрасывать нельзя, поэтому сбросьте id или как то экранируйте. И вместе посмотрим)

[@it-coding]

@@it-sin9k проверить скорее всего не получится , так как это скрин с react native app , но когда я на него перехожу , я делаю полный сброс роутов, и с ним происходит все как в первый рендер ! Проверил по логам , идёт запись в рефы, там есть значения , но после сброса роутов и переход на экран , в рефах опять null, похоже на то , что компонент удаляется и заново монтируется , и даже рефы заново создаются , по этому решил с помощью объекта поверх компонента

[@it-coding]

@@it-sin9k ещё вариант писать эти данные в стор, но они там не очень нужны

[@it-sin9k]

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

[@it-coding]

@@it-sin9k Понимаю) все же спасибо за внимание )

[@Alexander-fp4fs]

давай что нибудь про SyntheticEvent

[@it-sin9k]

есть такая идея, но вероятно это будет не скоро, т.к. судя по голосовалке, народ просил на патерны переключиться

[@apanchuk]

@@it-sin9k а где было голосование?

[@it-sin9k]

В твитере я анонсировал голосовалку :) twitter.com/it_sin9k набросал пару тем, о чем рассказать после хуков) теперь нам еще разблокировали функционал делать голосовалки и в KZbin, будем и там и там запускать)

[@fl1pp1x]

Geniously

[@ReAgent003]

Сложно) И это при том, что, как заметил автор видео, это только базовые принципы работы с рефами) что же дальше...

[@WebEnv]

+++++++++

[@romanmed9035]

в видео 2020 года о хуках рассказывает автор, а в 2021 снова вернулся к классам?

[@it-sin9k]

Нет, не вернулся :) Но чтобы полностью рассказать про все API для работы с ref, решил затронуть и классы

[@romanmed9035]

@@it-sin9k спасибо за пояснение