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

В данном видео мы поговорим про React Context. Рассмотрим, что это такое, когда его нужно использовать. Также дам рекомендации по использованию и оптимизации контекста.

Код из видео:

Telegram канал:

Таймкоды:
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 - Заключение

[malsagov]

Очень крутая подача информации, не перестану это повторять) спасибо 👍

[dmitrykisel]

Спасибо за гайд и отличную подачу информации🙏

[astkh]

Привет, мог бы ты рассказать, как сам учишься и как в целом дошёл до уровня senior ?

[_oxios_]

Спасибо! Под конец, где пишется свой стор, тяжко местами понимать, но оно понятно, около сеньорская тема раскрывается

[username]

привет, спасибо за труд, видео очень полезное.
Можешь записать про _proto_ & prototype.

[v.demchenko]

Ayub, сделай пж видео с примерами замыкания. Сложные примеры желательно.
Мб покажешь замыкание в реакт елементах.

Качество выросло, круто)

[rustamakhmetyanov]

Спасибо за видео. Очень толковые нужные вещи разбираешь. но я поддержу предыдущего комментатора "Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко раздражает и мешает сосредоточиться"

[demiurgen]

Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко разражает и мешает сосредоточиться

[jhonkoan]

Аюб. Я наткнулся на твой канал недавно. Но ты меня заинтересовал. В отличие от других, впервые я вижу что-то сложное, а не то, что есть в доке реакта. Не знаю, как работают алгоритмы ютуба. Первое видео, которое мне попалось, это собес джуна, где в конце ты задал задачку на useRef. Это явно вопрос не на джуна. Затем я посмотрел видео на мидла, где в конце ты задал то ли похожую, то ли ту же самую задачу на useRef. Я подумал - на этом уровне есть о чём подумать. В данном видео я ожидал увидеть, в каких же случаях использовать контекст. Я ожидал, что контекст будет использоваться вместе с редакс/мобкс(нужное вставить). Но нет, ты показал обсервер-паттерн + что-то сверху(показал свой вариант сторов грубо говоря). У меня есть несколько вопросов:
- в каких случаях использовать контекст, если на проекте уже используются сторонние библиотеки для управления состоянием?
- сколько тебе лет?(может где-то есть инфа, я не в курсе, не искал)
- какой подход к архитектуре фронтенд-приложения в данный момент самый лучший или удобный по твоему мнению(fsd, модули или др.)
- свой предыдущий душный коммент я удалил(дважды ;) )
- что меня беспокоит больше всего(надеюсь, что и всех остальных), это то, как разрабатывать фронтенд на React по SOLID.
На этом моменте я хочу сказать свои мысли, как я понимаю SOLID в React. И я очень надеюсь на твой ответ, как сеньора.
S - компонент делает что-то одно. Если нужно делать GET--запрос на сервер, то делаем <ApiWrapper>{который внутри: 1) Отображает данные; 2) отображает состояние загрузки; 3) показывает ошибку}<ApiWrapper /> (Я туповат, для меня это выглядит как кастомный хук useFetch + рендер+паттерн) ).
O - Использовать композицию children(это просто ОФИГЕННО, open-closed === чел, используй children, не надо прокидывать пропсы на 2(3, 4, 5 - уровней вниз (вопрос только в ререндерах) ( а вот если лагает, то пора попробовать React.memo, useReducer, useMemo, useCallback)
L - то, что я нашёл, так это блять {...props} Моя реакция -> ;). Неужели это правда???
I - Принцип разделения интерфейса. Говорит о том, что не надо привязываться к структуре объекта. Он говорит о том, что нужно использовать те поля, которые используются. Нах нам огромный объект, если мы от него хотим только 2 поля (название и дату создания, например). В контексте реакта я вижу это кол-вом пропсов(Хочу знать правильный ответ от сеньора)
D - инверсия зависимостей. Если брать реакт, то это тупо делегирование ответственности пропсу. Типа внутри компонента есть кнопка например, и у неё есть онклик. Так пусть лучше этим онкликом занимается пропс, чем сам компонент, ведь тогда компоненту пох, а вот пропс, и чел снаружи об этом беспокоится.

[CJIueHb]

Трюк с null в initial values для контекста очень хорош только, если state выносить из провайдера выше (в компонент Recommended) и передавать в AppProvider. А если AppProvider делать так, чтобы он не принимал начальные значения, а инкапсулировал state в себе (при помощи компонента-обертки с useState), то вроде как уже придется мириться с тем, что хранимые значения могут быть null/undefined или выдумывать начальные значения, как было показано в ролике(()=>{} для функции, например).

[milomans]

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

[pavelsorokin]

Привет. Было бы интересно глянуть как оптимизированный вариант ты бы реализовал для SSR. Я его использовал как паттерн, но пришлось выкручиваться при замене uLE и uE хуков. Контент как всегда отличный. Спасибо!

[ansaganie]

Крутой видос! Спасибо большое!
subscribers можно было создать как Set?

[luckytima]

Как всегда уровень )) Прости за глупый вопрос react dev насколько хорошо нужно уметь верстать? мне нравится ковырять js + ts, но вот верстка вообще не нравится

[rusfungame]

А был видос такой же только не про контекст, а про редакс тулкит? Если нет можно сделать. Про подводные камни рассказать, что не написано в документации

[grenadier]

Стоит еще показать, как быть, когда селектор возвращает несколько значений. Типа state => ({ isLoading: state.isLoading, users: state.users })

[inqvisitor]

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

[cmffejc]

Привет! Спс за труд, за видео, много нового узнаю.
А почему ты не используешь тип VoidFunction вместо записи ()=>void

[miroslavwise]

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

[druf]

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