Контекст в React. useContext и вложенные Context.Provider

preview_player
Показать описание
Разберемся что такое prop drilling и как это фиксить, узнаем как работает контекст в React и как избежать лишних ререндеров при его использовании.

00:00 - Анонс последней темы в рамках серии React Hooks
00:33 - Prop Drilling
00:52 - Знакомство с кодом примера без использования контекста
02:39 - Почему Prop Drilling это плохо
04:09 - Отличия подходов наглядно на картинках
04:55 - Создание контекста и провайдера, немного о defaultValue
07:55 - useContext вместо Prop Drilling
11:13 - Особенности обращения к провайдеру, подробнее о defaultValue
14:06 - Почему Context API не может из коробки заменить стейт менеджер
15:39 - Разделение контекстов, MasterProvider
17:24 - Обзор кода финального примера
18:00 - Отличия перформанса финального примера с разделенным контекстом
19:13 - Итоги

GitHub Issues на тему ререндера контекста:
  1. senior_zone
Рекомендации по теме
Контекст в React. 0:20:07

Контекст в React. useContext и вложенные Context.Provider

#11: 🍕 React 0:20:39

#11: 🍕 React Pizza v2 — Что такое контекст в React (useContext) и Props Drilling?...

React JS #15 0:11:00

React JS #15 Контекст (React Context)

useContext In 2 0:02:18

useContext In 2 Minutes - the React Hooks series

Лучшие практики по 0:16:22

Лучшие практики по работе с Context API в React приложении

React Context Kullanımı 0:13:45

React Context Kullanımı

Learn useContext In 0:13:08

Learn useContext In 13 Minutes

Entender Context API 0:20:27

Entender Context API com React Native de uma vez por todas! ✅

useContext in depth 0:08:23

useContext in depth | React JS Advanced Concepts

Why use a 0:09:34

Why use a Custom Hook for React Context API instead of useContext (+ TypeScript)

useContext Hook in 0:06:07

useContext Hook in React JS in 5 Minutes | React Context API

Context API Tutorial 0:12:26

Context API Tutorial For Beginners - Using React Hooks

React Context in 0:01:00

React Context in 1 minute

Learn React useContext 0:14:45

Learn React useContext In 9 Minutes | ReactJs Context For Beginners

Redux or Context 0:06:16

Redux or Context in React

Curso React: 75. 0:15:16

Curso React: 75. Context API Introducción - jonmircha

React TypeScript Tutorial 0:07:21

React TypeScript Tutorial - 14 - useContext Hook

React: Context Api 0:18:35

React: Context Api

Context Api React 0:09:20

Context Api React | Usecontext React Hooks

React Hooks Tutorial 0:03:43

React Hooks Tutorial - 15 - useContext Hook Part 1

This Context API 0:05:37

This Context API Mistake Ruins Your Whole React App (All Components Re-Render)

prop drilling in 0:00:48

prop drilling in react | composition vs context api

useContext | React 0:14:42

useContext | React Hooks | [Arabic Video]

React - Context 0:09:33

React - Context API

Комментарии
Автор

Спасибо огромное за мега крутое объяснение! На мой взгляд, для новичков оно сложновато, но если посмотреть несколько раз, то всё становится очень понятно. Да еще и такой нетривиальный подход осветили! Я в восторге!!! Еще раз безгранично благодарю! Надеюсь, что вы не перестанете снимать такой полезный контент! Удачи!🥰

elenaizmaylova
Автор

Очень круто! Продолжай, пожалуйста, снимать!

Максим-дущ
Автор

Все по полочкам, довольно интересно слушать =)

deanArtDev
Автор

Продолжай в том же духе, хорошо объясняешь!

ragnarkkr
Автор

А еще можно добавить оптимизацию одну: класть значение и изменение значения в разные провайдеры(them в один провайдер, а setTheme в другой) Эта фишка вообще к любым значениям применима. Ведь есть компоненты куда мы прокидываем например setTheme, а theme нет и будут лишние ненужные перерендеры.

avikbox
Автор

Для чего восклицательный знак в этой строчке? useContext ( context: MyContext)! [0];

JohPeach