ПОЛНОЦЕННЫЙ ГАЙД ПО REACT CONTEXT

  Рет қаралды 8,924

Ayub Begimkulov

Ayub Begimkulov

Күн бұрын

В данном видео мы поговорим про React Context. Рассмотрим, что это такое, когда его нужно использовать. Также дам рекомендации по использованию и оптимизации контекста.
Код из видео:
github.com/Ayub-Begimkulov/yo...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-00:51 - Интро.
00:51-03:00 - Что такое контекст?
03:00-05:21 - Смотрим пример без контекста.
05:21-09:17 - Понимаем, как можно использовать контекст.
09:17-13:49 - Мои рекомендации по использованию контекста.
13:49-16:23 - Использование контекста в классовых компонентах.
16:23-23:05 - Понимаем проблемы с контекстом.
23:05-35:15 - Оптимизируем рендеры.
35:15-35:44 - Заключение

Пікірлер: 73
@malsagov6331
@malsagov6331 Жыл бұрын
Очень крутая подача информации, не перестану это повторять) спасибо 👍
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@dmitrykisel9485
@dmitrykisel9485 Жыл бұрын
Спасибо за гайд и отличную подачу информации🙏
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
Рад помочь!
@_oxios_
@_oxios_ Жыл бұрын
Спасибо! Под конец, где пишется свой стор, тяжко местами понимать, но оно понятно, около сеньорская тема раскрывается
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
А можешь раскрыть мысль? На каком моменте стало не понятно? Что можно было бы улучшить?
@mifaress
@mifaress 11 ай бұрын
Тоже самое. На участке "оптимизируем рендеры" плыть начинаю
@user-uo7tg9tk3j
@user-uo7tg9tk3j 4 ай бұрын
@@ayub_begimkulov дополню: неконтролируемая привычка крутить колёсико мыши и прыгать по коду сильно мешает смотреть и понимать происходящее. Скорость подачи - не свойственная для Урока, но больше походит на Объяснение одного разработчика другому - вышестоящему - того, что ты сделал. Что-то вроде рабочего отчета на ревью. И в этом прям беда.
@onevermore
@onevermore Жыл бұрын
спасибо большое за полезный контент)
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Рад помочь!
@Guccifer808
@Guccifer808 Жыл бұрын
Спасибо! Продолжай.
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
спасибо за фидбэк!
@Mirrasim
@Mirrasim Жыл бұрын
спасибо за контент
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
не за что!
@user-jn1iu1ef1r
@user-jn1iu1ef1r Жыл бұрын
Полезно, спасибо
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Рад помочь!
@v.demchenko
@v.demchenko Жыл бұрын
Ayub, сделай пж видео с примерами замыкания. Сложные примеры желательно. Мб покажешь замыкание в реакт елементах. Качество выросло, круто)
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк! Записал себе в список.
@v.demchenko
@v.demchenko Жыл бұрын
@@ayub_begimkulov расскажи пожалуйста в данной теме, про замыкания и как они связаны с реакт волокном. И хотелось бы увидеть хук useState в ванилла джс. И ещё, ты проводишь менторство?
@rustamakhmetyanov4404
@rustamakhmetyanov4404 Жыл бұрын
Спасибо за видео. Очень толковые нужные вещи разбираешь. но я поддержу предыдущего комментатора "Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко раздражает и мешает сосредоточиться"
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Да, есть такая проблема. Постараюсь не повторять в дальнейшем. Спасибо за фидбэк!
@astkh4381
@astkh4381 Жыл бұрын
Привет, мог бы ты рассказать , как сам учишься и как в целом дошёл до уровня senior ?
@demiurgen13
@demiurgen13 Жыл бұрын
Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко разражает и мешает сосредоточиться
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
Да, есть плохая привычка. В новых видео кажется смог избавиться от этого)
@user-nj6dh2ck2y
@user-nj6dh2ck2y Жыл бұрын
Лайкос не глядя
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Спасибо!
@username9409
@username9409 Жыл бұрын
привет, спасибо за труд, видео очень полезное. Можешь записать про _proto_ & prototype.
@user-cj8sn6ej3l
@user-cj8sn6ej3l Жыл бұрын
Вот это мы смотрим.
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@jhonkoan1063
@jhonkoan1063 Жыл бұрын
Аюб. Я наткнулся на твой канал недавно. Но ты меня заинтересовал. В отличие от других, впервые я вижу что-то сложное, а не то, что есть в доке реакта. Не знаю, как работают алгоритмы ютуба. Первое видео, которое мне попалось, это собес джуна, где в конце ты задал задачку на useRef. Это явно вопрос не на джуна. Затем я посмотрел видео на мидла, где в конце ты задал то ли похожую, то ли ту же самую задачу на useRef. Я подумал - на этом уровне есть о чём подумать. В данном видео я ожидал увидеть, в каких же случаях использовать контекст. Я ожидал, что контекст будет использоваться вместе с редакс/мобкс(нужное вставить). Но нет, ты показал обсервер-паттерн + что-то сверху(показал свой вариант сторов грубо говоря). У меня есть несколько вопросов: - в каких случаях использовать контекст, если на проекте уже используются сторонние библиотеки для управления состоянием? - сколько тебе лет?(может где-то есть инфа, я не в курсе, не искал) - какой подход к архитектуре фронтенд-приложения в данный момент самый лучший или удобный по твоему мнению(fsd, модули или др.) - свой предыдущий душный коммент я удалил(дважды ;) ) - что меня беспокоит больше всего(надеюсь, что и всех остальных), это то, как разрабатывать фронтенд на React по SOLID. На этом моменте я хочу сказать свои мысли, как я понимаю SOLID в React. И я очень надеюсь на твой ответ, как сеньора. S - компонент делает что-то одно. Если нужно делать GET--запрос на сервер, то делаем {который внутри: 1) Отображает данные; 2) отображает состояние загрузки; 3) показывает ошибку} (Я туповат, для меня это выглядит как кастомный хук useFetch + рендер+паттерн) ). O - Использовать композицию children(это просто ОФИГЕННО, open-closed === чел, используй children, не надо прокидывать пропсы на 2(3, 4, 5 - 1000000000000000) уровней вниз (вопрос только в ререндерах) ( а вот если лагает, то пора попробовать React.memo, useReducer, useMemo, useCallback) L - то, что я нашёл, так это блять {...props} Моя реакция -> ;). Неужели это правда??? I - Принцип разделения интерфейса. Говорит о том, что не надо привязываться к структуре объекта. Он говорит о том, что нужно использовать те поля, которые используются. Нах нам огромный объект, если мы от него хотим только 2 поля (название и дату создания, например). В контексте реакта я вижу это кол-вом пропсов(Хочу знать правильный ответ от сеньора) D - инверсия зависимостей. Если брать реакт, то это тупо делегирование ответственности пропсу. Типа внутри компонента есть кнопка например, и у неё есть онклик. Так пусть лучше этим онкликом занимается пропс, чем сам компонент, ведь тогда компоненту пох, а вот пропс, и чел снаружи об этом беспокоится.
@miloman1995s
@miloman1995s Жыл бұрын
привет, можешь посоветовать курс для повышение квалификации для мидлов? спс хотел купить курс у улби тв, но че то не знаю, почитал че они будут делать и понял что половину я знаю.... и не купил) и вот думаю может есть какие курсы хорошие еще
@CJIu3eHb
@CJIu3eHb Жыл бұрын
Трюк с null в initial values для контекста очень хорош только, если state выносить из провайдера выше (в компонент Recommended) и передавать в AppProvider. А если AppProvider делать так, чтобы он не принимал начальные значения, а инкапсулировал state в себе (при помощи компонента-обертки с useState), то вроде как уже придется мириться с тем, что хранимые значения могут быть null/undefined или выдумывать начальные значения, как было показано в ролике(()=>{} для функции, например).
@grenadier4702
@grenadier4702 Жыл бұрын
Стоит еще показать, как быть, когда селектор возвращает несколько значений. Типа state => ({ isLoading: state.isLoading, users: state.users })
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
можно вторым аргументом передать shallowEqual - `useSelector(state => ({...}), shallowEqal)`
@luckytima2315
@luckytima2315 Жыл бұрын
Как всегда уровень )) Прости за глупый вопрос react dev насколько хорошо нужно уметь верстать? мне нравится ковырять js + ts, но вот верстка вообще не нравится
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
Нужно знать на том уровне, чтобы ты мог спокойно заверстать какой-то бизнес-макет. Да, какие-то места подсмотреть можно, но не так, чтобы ты каждые 5 минут подсматривал в mdn.
@darkside2436
@darkside2436 Жыл бұрын
Коммент для продвижения
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Спасибо!
@inqvisitor3722
@inqvisitor3722 Жыл бұрын
оптимизация выглядит как оверинженириг, проще тот же редакс подключить. Контекст ведь обычно используют для чуть более сложных компонентов, типо календарей и т.д. На мой взгляд достаточно мемоизировать передаваемый объект в value
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Моя задача тут была показать то, какие есть возможности. Уже вышло видео про redux vs context. И я как там советую не пилить свои велосипеды. Однако подобная реализация, как ты и сказал, может быть очень полезна для сложных компонентов, по типу DatePicker и тд., чтобы получать меньше апдейтов. А стор в либах юзать не очень прикольная идея.
@harrisonwinston2850
@harrisonwinston2850 Жыл бұрын
почему, например мне нужно 1 состояние, остальное все посредством того же react-query, а в контексте авторизацию хранить=)
@rusfungame
@rusfungame Жыл бұрын
А был видос такой же только не про контекст, а про редакс тулкит? Если нет можно сделать. Про подводные камни рассказать, что не написано в документации
@stepanrudiak95
@stepanrudiak95 Жыл бұрын
kzfaq.info/get/bejne/hNeql7l_l9rdpoU.html
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
Есть видос про топ 6 ошибок - kzfaq.info/get/bejne/m8qdi9KD3M21lX0.html
@user-cm9ff1ej9c
@user-cm9ff1ej9c Жыл бұрын
Привет! Спс за труд, за видео, много нового узнаю. А почему ты не используешь тип VoidFunction вместо записи ()=>void
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Я даже не знал про него) Спасибо за фидбэк!
@inqvisitor3722
@inqvisitor3722 Жыл бұрын
а смысл выпендриваться? Тоже самое что использовать выражение if(!~some.indexOf()) просто из-за того что знаешь. Но попробуй потом коллегам объяснить
@ansaganie
@ansaganie Жыл бұрын
Крутой видос! Спасибо большое! subscribers можно было создать как Set?
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
Да, сет тут тоже можно было использовать.
@pavelsorokin3657
@pavelsorokin3657 Жыл бұрын
Привет. Было бы интересно глянуть как оптимизированный вариант ты бы реализовал для SSR. Я его использовал как паттерн, но пришлось выкручиваться при замене uLE и uE хуков. Контент как всегда отличный. Спасибо!
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Привет! А с чем конкретно были проблемы? С useLayoutEffect? Можно создать обертку useIsomorphicLayoutEffect, который будет работать, как useEffect на сервере и как useLayoutEffect на клиенте.
@pavelsorokin3657
@pavelsorokin3657 Жыл бұрын
@@ayub_begimkulov Да сначала я так и сделал, правда потом переделал под свои нужды. Спасибо!
@Fs-xj2gu
@Fs-xj2gu Жыл бұрын
запиши такое видео по react lazy
@miroslavwise9276
@miroslavwise9276 Жыл бұрын
дайте пожалуйста название канала в телеграмм, я не могу по ссылке перейти
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
@ayub_begimkulov_coding
@v.demchenko
@v.demchenko Жыл бұрын
Много полезной информации, которая пока что не понятна)
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
А можешь рассказать, на каком моменте стало не понятно? Есть моменты, которые можно улучшить с моей стороны?
@v.demchenko
@v.demchenko Жыл бұрын
@@ayub_begimkulov да мне кажется это проблема больше моя. Так как на практике такого не использовал и не очень понимаю то о чем ты говоришь. Но это круто, такого контента мало😅 Продолжай!
@artservice08
@artservice08 Жыл бұрын
контент ценный, спасибо автору. Но для меня оказалось сложным воспринимать и укладывать в голове всю информацию с такой скоростью и при этом очень быстрый скроллинг по страницам - приходится как-то отматывать и уже позже склеивать аудио и видео контент.
@druf5962
@druf5962 Жыл бұрын
Посл часть, где показываешь отпимизацию рендеров через стор на минималках. Такой код нужно уметь писать в общем джуну? А то крыша уже едет от инфы))
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Нет, джуну это знать не нужно, но рано или поздно все равно нужно понять, как это все работает.
@druf5962
@druf5962 Жыл бұрын
@@ayub_begimkulov спс за ответ. Тож думаю, что джуну не нужно, только и джуны не нужны))
@ridgal
@ridgal Жыл бұрын
Ты откуда Аюб?
@RaLLy869
@RaLLy869 Жыл бұрын
Я никогда не понимал, какой смысл использовать контекст с оборачиванием, если можно просто создать глобальный объект и его импортировать в компоненты? Мы же так и так импортируем контекст в хуки для взаимодействия с данными
@olegivanov80
@olegivanov80 Жыл бұрын
а рендер как будет происходить
@RaLLy869
@RaLLy869 Жыл бұрын
@@olegivanov80 так мы в этом объекте также функцию сетстейта будем хранить, так же как и в провайдере и стейт будет обновляться абсолютно также...
@inqvisitor3722
@inqvisitor3722 Жыл бұрын
лишние строчки с импортированием. Что-то поменяется - придется везде менять. Если создать хук и получать все данные и методы через него - то другое дело. А если Proxy использовать, то получился бы mobx. Только непонятно зачем нужен этот велосипед
@RaLLy869
@RaLLy869 Жыл бұрын
@@inqvisitor3722 так я не вижу основной причины/преимущества использования контекста, он ничего не добавляет, те же самые импорты были бы если вместо create context использовали бы обычный объект
@ayub_begimkulov
@ayub_begimkulov 10 ай бұрын
По сути контекст из себя представляет имплементацию dependency injection в рамках React. Если использовать глобальный объект - ты не сможешь так легко подменить его значение на моковые для тех же тестов например. Ну и плюс контекст позволяет отслеживать иерархию компонентов и переписывать его значение для определенного куска дерева. В общем, плюсов тут много)
@bolovy6093
@bolovy6093 Жыл бұрын
Привет Аюб, темы у тебя интересные, но не интересно смотреть на готовое решение. Лучше в видео пиши код сам. Спасибо за контент.
@ayub_begimkulov
@ayub_begimkulov Жыл бұрын
Проблема в том, что писать код и объяснить в то же время очень сложно. Надо подумать, как лучше все это организовать.
Context против Redux | Разбираемся что лучше
21:07
Разбираемся в React JSX
13:49
Ayub Begimkulov
Рет қаралды 8 М.
МАМА И STANDOFF 2 😳 !FAKE GUN! #shorts
00:34
INNA SERG
Рет қаралды 4,8 МЛН
Мы никогда не были так напуганы!
00:15
Аришнев
Рет қаралды 6 МЛН
Я нашел кто меня пранкует!
00:51
Аришнев
Рет қаралды 4 МЛН
Don't Use React Context!! Use This instead
13:34
CoderOne
Рет қаралды 26 М.
React JS #15 Контекст (React Context)
11:00
webDev
Рет қаралды 28 М.
Почему я не использую хук useReducer? | React Hooks
30:27
Для чего нужен useContext в React, простым языком
6:14
Дмитрий Герасимов - о разработке в сфере IT просто
Рет қаралды 13 М.
Learn React Hooks: useContext - Simply Explained!
15:46
Cosden Solutions
Рет қаралды 135 М.
44 - React JS Практика - Context API
43:18
IT-KAMASUTRA
Рет қаралды 108 М.
МАМА И STANDOFF 2 😳 !FAKE GUN! #shorts
00:34
INNA SERG
Рет қаралды 4,8 МЛН