Dev Surge
Dev Surge
  • 56
  • 55 632
Продолжаем создавать собственные хуки для профессионального приложения
В этом уроке мы рассмотрим несколько примеров кастомных хуков и поймём, как они могут помочь нам:
1. В совместной работе
2. В соблюдении принципа DRY
3. В упрощении будущих миграций
Документация: react.dev/learn/reusing-logic-with-custom-hooks
Код: github.com/becasualle/devsurge-react-course/commit/b3bd882dcb8d8dffbf79259600f8cd21f02aba74
Всех, кто дошел до этого видоса поздравляю с успешным окончанием курса! Теперь вы можете создавать собственные приложения на React. Если вдруг что-то забыли - пересматривайте видео, читайте документацию, гуглите и подключайте мощь ChatGPT для реализации своих творческих задумок.
Мои статьи по веб-разработке доступны на devsurge.ru.
Переглядів: 1 747

Відео

Как создать собственный хук в React
Переглядів 3865 місяців тому
React предоставляет встроенные хуки, такими как useState, useContext и useEffect. Иногда вам захочется иметь хук для какой-то более специфической цели: для получения данных, для отслеживания того, находится ли пользователь в сети, или для подключения к чату. Вы можете не найти таких хуков в React, но вы можете создать свои собственные хуки для задач вашего приложения. В этом уроке вы узнаете: -...
useEffect: как правильно работать с зависимостями
Переглядів 2595 місяців тому
Когда вы пишете эффект, линтер проверяет список зависимостей. Должны быть включены все реактивные значения, которые считывает эффект - пропсы, состояние, вычисляемые значения. При этом, лишние зависимости могут привести к тому, что ваш эффект будет запускаться слишком часто или создаст бесконечный цикл. В этом уроке вы узнаете, как правильно удалять ненужные зависимости. Мы разберемся: - Как ис...
useEffectEvent: отделяем события от эффектов
Переглядів 3476 місяців тому
Обработчики событий запускаются только при повторном выполнении того же взаимодействия. В отличие от обработчиков событий, эффекты повторно синхронизируются, если реактивное значение, которое они считывают, например пропс или переменная состояния, отличается от того, что было во время последнего рендера. Иногда требуется сочетание обоих типов поведения: эффект, который повторно запускается в от...
Жизненный цикл реактивных эффектов useEffect
Переглядів 3327 місяців тому
В этом уроке расскажу про жизненный цикл компонентов и эффектов. Вот, что следует запомнить: - Компоненты могут монтироваться, обновляться и размонтироваться. - Каждый Эффект имеет отдельный жизненный цикл от окружающего компонента. - Каждый Эффект описывает отдельный процесс синхронизации, который может запускаться и останавливаться. - Когда вы пишете и читаете Эффекты, думайте с точки зрения ...
Вам не нужен useEffect: Часть 2
Переглядів 4748 місяців тому
Основные идеи этого и предыдущего видео: - Если вы можете вычислить что-то во время рендеринга, вам не нужен Эффект. - Чтобы кэшировать дорогостоящие вычисления, добавьте useMemo вместо useEffect. - Чтобы сбросить состояние всего дерева компонентов, передайте ему другое значение ключа. - Чтобы сбросить определенный кусочек состояния в ответ на изменение пропса, вызовите сеттер во время рендерин...
Вам не нужен useEffect: Часть 1
Переглядів 6669 місяців тому
Эффекты позволяют вам "выйти" за пределы React и синхронизировать ваши компоненты с какой-либо внешней системой, например с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстр...
useEffect: примеры практического использования
Переглядів 3439 місяців тому
React в Strict Mode намеренно перемонтирует ваши компоненты в процессе разработки, чтобы преждевременно обнаружить баги. Когда мы создаем эффект, мы должны думать о том, как он должен работать после перемонтирования. Пользователь не должен различать однократный запуск эффекта и последовательность setup → cleanup → setup. Большинство эффектов, которые вы будете писать, будут вписываться в один и...
useEffect: cleanup функция
Переглядів 40310 місяців тому
Иногда нам требуется остановить или очистить операции какого-то эффекта. Например, "connect" нуждается в "disconnect", "subscribe" - в "unsubscribe", а "fetch" - в "cancel" или "ignore". Вы узнаете, как это сделать с помощью функции очистки. Документация: react.dev/learn/synchronizing-with-effects Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои стат...
useEffect: зачем нужен и как использовать
Переглядів 57310 місяців тому
Некоторые компоненты должны синхронизироваться с внешними системами. Например, вы можете захотеть управлять компонентом, не относящимся к React, на основе состояния React, установить соединение с сервером или отправлять логи аналитики при появлении компонента на экране. Эффекты позволяют выполнить некоторый код после рендеринга, чтобы синхронизировать компонент с какой-либо системой вне React. ...
useRef: вешаем ref на компонент и прочие тонкости
Переглядів 31610 місяців тому
В этом уроке вы узнаете: - Как получить доступ к DOM-узлу другого компонента - В каких случаях безопасно изменять DOM, управляемый React Документация: react.dev/learn/manipulating-the-dom-with-refs Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои статьи по веб-разработке доступны на devsurge.ru/
useRef: работаем с элементами DOM дерева
Переглядів 39310 місяців тому
React автоматически обновляет DOM в соответствии с результатами рендеринга компонента.Иногда вам может понадобиться прямой доступ к элементам DOM - например, чтобы сфокусировать инпут, прокрутить страницу, измерить размер или расположение элемента. В этом случае нам поможет "ссылка" на HTML-элемент, которую мы создаем с помощью useRef. Документация: react.dev/learn/manipulating-the-dom-with-ref...
В каких случаях использовать useRef
Переглядів 46411 місяців тому
В этом уроке я расскажу, в каких случаях нам потребуется useRef. Разберу пример с первым случаем - когда нам нужно хранить айдишник setInterval/setTimeOut. Документация: react.dev/learn/referencing-values-with-refs Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои статьи по веб-разработке доступны на devsurge.ru/
Знакомимся с хуком useRef
Переглядів 43311 місяців тому
Некоторым компонентам может потребоваться управление и синхронизация с системами за пределами React. Например, сфокусировать ввод с помощью API браузера, воспроизвести и поставить на паузу видеоплеер, реализованный без React, или подключиться и слушать сообщения с удаленного сервера. В этой главе вы познакомитесь с аварийными люками, которые позволят вам "выйти" за пределы React и подключиться ...
Токсичность на работе в IT: как распознать и что делать
Переглядів 125Рік тому
Токсичность - это вредное и разрушительное поведение или отношение. Включает в себя: словесные оскорбления, манипуляции, издевательства, агрессию и отсутствие сочувствия. Последствия - наносит вред отношениям, вызывает стресс, тревогу и низкую самооценку. В этом выпуске подкаста поговорим: - Как токсичность выражается на рабочем месте - Почему возникает - Как попасть в команду без токсичных пер...
Правильная организация хранилища с использованием useContext и useReducer
Переглядів 363Рік тому
Правильная организация хранилища с использованием useContext и useReducer
Создаём хранилище глобального состояния с помощью useReducer и useContext
Переглядів 592Рік тому
Создаём хранилище глобального состояния с помощью useReducer и useContext
useContext: в каких случаях использовать контекст?
Переглядів 340Рік тому
useContext: в каких случаях использовать контекст?
useContext: переиспользуем контекст в том же компоненте с помощью children
Переглядів 360Рік тому
useContext: переиспользуем контекст в том же компоненте с помощью children
useContext: избавляемся от Props Drilling
Переглядів 599Рік тому
useContext: избавляемся от Props Drilling
useReducer: как извлечь логику обновления состояния в reducer-функцию
Переглядів 559Рік тому
useReducer: как извлечь логику обновления состояния в reducer-функцию
Онлайн-курсы: стоит ли проходить и как устроен рынок в РФ
Переглядів 270Рік тому
Онлайн-курсы: стоит ли проходить и как устроен рынок в РФ
Почему React сбрасывает состояние и как этим управлять
Переглядів 717Рік тому
Почему React сбрасывает состояние и как этим управлять
Делимся состоянием между компонентами
Переглядів 613Рік тому
Делимся состоянием между компонентами
Как правильно структурировать состояние React: 5 примеров
Переглядів 792Рік тому
Как правильно структурировать состояние React: 5 примеров
5 принципов структурирования состояния компонента React
Переглядів 579Рік тому
5 принципов структурирования состояния компонента React
Декларативный подход к созданию интерфейса: 5 шагов
Переглядів 707Рік тому
Декларативный подход к созданию интерфейса: 5 шагов
Императивный и декларативный подход к созданию UI
Переглядів 811Рік тому
Императивный и декларативный подход к созданию UI
Обзор секции "Управление состоянием"
Переглядів 547Рік тому
Обзор секции "Управление состоянием"
Работаем с массивами в качестве состояния с использованием useState
Переглядів 854Рік тому
Работаем с массивами в качестве состояния с использованием useState

КОМЕНТАРІ

  • @probossgogogo5879
    @probossgogogo5879 6 днів тому

    2:28 вот это мисклик.

  • @core6694
    @core6694 16 днів тому

    Смотрел видосы из топа выдачи ютуба по реакту джс , абсолютная каша и отврат . Этот видос просто мед для ушек и максимально простыми словами истолкован . Надеюсь дальше также. Двигайся дальше , если те засросли попали в топы , ты точно сможешь ! +rep

  • @Деректор
    @Деректор 22 дні тому

    Всем привет, бля!

  • @showrun4747
    @showrun4747 Місяць тому

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

  • @showrun4747
    @showrun4747 Місяць тому

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

  • @showrun4747
    @showrun4747 Місяць тому

    наконец-то звук получше

  • @Vllad_Ko
    @Vllad_Ko 2 місяці тому

    зачем в return setIsOnline?

  • @Vllad_Ko
    @Vllad_Ko 2 місяці тому

    та, там товарищ сравнивает объекты и ожидает, что они когда нибудь могут дать true ))

  • @PavelChupryna
    @PavelChupryna 2 місяці тому

    Спасибо за урок!

  • @PavelChupryna
    @PavelChupryna 2 місяці тому

    Спасибо за урок

  • @PavelChupryna
    @PavelChupryna 2 місяці тому

    Интересно, спасибо!)

  • @КатяТ-я2д
    @КатяТ-я2д 2 місяці тому

    Спасибо за видео и за курс! Очень доходчиво объясняете, вместе с вашими видео гораздо полезнее и понятнее становится чтение документации

  • @СергейКривенко-о1в
    @СергейКривенко-о1в 3 місяці тому

    важно понимать, что изменение пропса не ведет к ререндеру, это частое заблуждение и этот вопрос любят задавать на собеседованиях

  • @levlegostaiev
    @levlegostaiev 3 місяці тому

    Вы очень хорошо объясняете 👍👍👍

  • @donjuanfamily1128
    @donjuanfamily1128 3 місяці тому

    Как так, три месяца искал понятный разбор React с документацией. А тут просто случайно в рекомендациях увидел. Автор большо0Ое спасибо !💯

  • @staskazakovcom
    @staskazakovcom 4 місяці тому

    Не понял, откуда для карточки берутся стили. В документации их вроде нет. Если просто вставить аватар в карточку, то ничего не происходит. Работает только если отдельно дописать стили и импортировать.

    • @trainPTT
      @trainPTT 3 місяці тому

      на самом деле стили есть по документации. Но их нигде не показывают даже в документации

  • @АлексейАлексеев-к1ю2ж

    Ни хрена не понял, слишком быстро.

  • @pranktv5008
    @pranktv5008 4 місяці тому

    Что за приложение в котором пишешь код ?

  • @whiteguards43
    @whiteguards43 4 місяці тому

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

    • @showrun4747
      @showrun4747 Місяць тому

      вы не в хлеву, не тыкайте. видео -учебное

    • @whiteguards43
      @whiteguards43 Місяць тому

      @@showrun4747 Я в интернете, тут и хлев и твой дом и ринг, свои правила неписаные сам соблюдай

  • @alexandermikulsky1224
    @alexandermikulsky1224 4 місяці тому

    Спасибо за видосы.)

  • @grandmaster-yo-yo
    @grandmaster-yo-yo 4 місяці тому

    Брат какая color theme у тебя стоит? Обновил вс, потерял ее, любимая была...Вроде что то с дракулой

  • @localhost666
    @localhost666 4 місяці тому

    Отличная задачка! Поставил на паузу, усложнил условия - элементов более 2, полчаса промучался и родил оч кривое решение с вынесением всех текстов в отдельный массив с объектами, хранящими состояние и индекс. Но решение автора оказалось гораздо элегантнее

  • @ErlanNurmanbetov
    @ErlanNurmanbetov 4 місяці тому

    Respect brat 'you help me' далше погнали 🤓

  • @user-pf9wz2ik2r
    @user-pf9wz2ik2r 4 місяці тому

    Like❤

  • @mialii7940
    @mialii7940 4 місяці тому

    Спасибо! Полезная информация, продолжайте в таком же духе! Побольше вам подписчиков!🎉

  • @tony1995599
    @tony1995599 4 місяці тому

    Большое спасибо!

  • @д8т
    @д8т 4 місяці тому

    Спасибо большое за выпуск! Мне было очень полезно и интересно. Отдельная благодарность за личные примеры ❤

  • @richardneil4651
    @richardneil4651 4 місяці тому

    лайк за выпуск, респект за помо от тиктика))

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n 4 місяці тому

    Добрый день. Можно развить тему и сделать кастомный хук для Intersection Observer. Который будет триггерить коллбэк, если элемент по рефу определен как видимый. Или меняется видим/невидим. Это полезно для прокруток с подгрузкой данных, например

    • @dima__rx5fw3rm1n
      @dima__rx5fw3rm1n 4 місяці тому

      Или Дебаунсить значение по таймеру, записывая в переменную хука только последнее значение, если по таймеру не произошло новых изменений

    • @dima__rx5fw3rm1n
      @dima__rx5fw3rm1n 4 місяці тому

      Или хук, аналог атомарного стора. Где будет сам объект состояния и набор объектов диспатча. Менять стор можно только через диспатч

  • @igorsenichev3779
    @igorsenichev3779 5 місяців тому

    Новый урок 👍

  • @МаксимМаксим-р2ф
    @МаксимМаксим-р2ф 5 місяців тому

    Это топ контент Ты в реках, кстати

  • @igorsenichev3779
    @igorsenichev3779 5 місяців тому

    Супер, новое видео 👍

  • @tony1995599
    @tony1995599 5 місяців тому

    Лучший! Ни какой воды, сразу к делу, но при этом всё объясняется досконально

    • @devsurge-official
      @devsurge-official 5 місяців тому

      Спасибо, мне очень приятно! 🖤

  • @tony1995599
    @tony1995599 5 місяців тому

    Большое спасибо! Лучший курс по React который мне попадался. Отличная идея использовать документацию, как базу для курса

    • @devsurge-official
      @devsurge-official 5 місяців тому

      Согласен. Документация доступна в любой момент, чтобы освежить знания или что-то найти, а также содержит примеры для практической отработки полученных знаний.

  • @darley-gu3bl
    @darley-gu3bl 5 місяців тому

    писят два

  • @bantuan7715
    @bantuan7715 5 місяців тому

    4 05 я гуль 0100-6 зхс

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Как сделать api заглкшку для бакэнда

    • @devsurge-official
      @devsurge-official 5 місяців тому

      я бы использовал моки mswjs.io/

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Сначала говоришь не изменяется потом говоришь изменяется Ничего не понял

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Важно: n=1; setState(n+5); setState(n+5); setState(n+5); Равносильно: n=1; setState(1+5); setState(1+5); setState(1+5);

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Если дважды запустить то console log будет инткрементироваться

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Скоро ютуб прикроют, залейте на Вконтакт плиз

  • @sehrgutlocj
    @sehrgutlocj 5 місяців тому

    Как запускать реакт в докере

    • @devsurge-official
      @devsurge-official 5 місяців тому

      www.freecodecamp.org/news/how-to-dockerize-a-react-application/

  • @somename9877
    @somename9877 5 місяців тому

    Проходил доку сам, но наткнулся на тебя, теперь прохожу с твоими видео одновременно, спасибо!

  • @Mr22Mishka
    @Mr22Mishka 5 місяців тому

    Всё супер, очень подробно и самое главное понятро объяснил, лайаа👍

  • @russianalara4978
    @russianalara4978 5 місяців тому

    спасибо за такое подробное и очень понятное объяснение

  • @igorsenichev3779
    @igorsenichev3779 5 місяців тому

    Спасибо 👍

  • @Mr22Mishka
    @Mr22Mishka 6 місяців тому

    Хорошое объяснение, а как можно решить данные проблемы без использования useEffectEvent?

    • @devsurge-official
      @devsurge-official 6 місяців тому

      Об этом я планирую упомянуть в следующем уроке. Если коротко - мы можем использовать обработчик событий, который принимает актуальное значение темы.

    • @ЛеонидБеликов-ж6г
      @ЛеонидБеликов-ж6г 4 місяці тому

      В документации - раздел "Storing information from previous renders". Также можно попробовать применить рефы для хранения темы или количества выбранных товаров.

  • @АннаЛопина-ч6н
    @АннаЛопина-ч6н 6 місяців тому

    🔥🔥🔥

  • @ИванИванов-в8г2ф
    @ИванИванов-в8г2ф 6 місяців тому

    Курс ещё актуален?) на 2024?)

  • @Юрец1993
    @Юрец1993 7 місяців тому

    Я не понял. Родительский компонет это не тег а сам компонен(функция "Avatar") а <Avatar/> -это дочка. Все данные которые мы передаём внутрь функции -это props То что мы используем в <Avatar/>-это так называемое спуск данных(propsi) с родителя ,то есть функции Avatar? Все правильно?