Что такое провайдер

Question

Что такое провайдер

Тип вопроса: Паттерны Вероятность: 10% Категория: Frontend Разработчик

Ответ

Провайдер (Provider) — это паттерн в React, который позволяет передавать данные или функциональность через дерево компонентов без явной передачи пропсов на каждом уровне.

Чаще всего используется с Context API:

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <Button />;
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}

Особенности:

Избегает пропс-дриллинга.
Можно использовать несколько провайдеров.
Оптимизируется через React.memo или useMemo.

Используется в библиотеках (Redux, React Router) для глобального доступа к состоянию.

Ответ 18+ 🔞

Да ты посмотри, какой хитрый способ придумали, блядь! Провайдер, сука. Ну, это такой паттерн в Реакте, чтобы не тащить пропсы через всю свою ебучую иерархию, как мешки с цементом, на каждом этаже крича "Эй, прими пропсы, мудила!".

Вот смотри, без него — это пиздец, прости господи. Представь: у тебя в самом верху App есть какая-нибудь тема, theme="dark". А кнопка твоя сидит где-то на двенадцатом уровне вложенности, в самом пиздульке. И ты должен эту тему протащить через десяток компонентов, которым она нахуй не уперлась, только чтобы передать её дальше. Это и есть пропс-дриллинг, ебать его в сраку. Все эти промежуточные компоненты становятся заложниками твоей архитектуры, как будто они курьеры, а не логические блоки.

А провайдер — он как волшебный портал, ёпта. Создаёшь контекст, оборачиваешь нужную часть приложения в <ThemeContext.Provider value="dark">, и всё, пиздец. Любой компонент внутри, хоть на сотом уровне, может взять и сказать: "А дайте-ка сюда контекст!" через useContext. И получит значение напрямую, без всех этих унизительных передач.

Вот, смотри на код, тут всё понятно:

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <Button />;
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}

Видишь? Toolbar нихуя не знает про тему, он просто рендерит Button. А Button сам, хитрая жопа, вытаскивает theme из контекста. Красота, блядь!

Что ещё важно, чтобы не наебнуться:

Главная фишка — убивает этот ебучий пропс-дриллинг. Словно глоток воздуха после подъёма на девятый этаж.
Можно навешать их, провайдеров этих, овердохуища. Один для темы, другой для пользователя, третий для какого-нибудь бокового меню. Главное — не запутаться, а то будет пизда.
С оптимизацией надо головой думать. Если провайдер передаёт новый объект при каждом рендере, то все его потребители тоже перерендерятся, даже если реальные данные не изменились. Тут тебе и React.memo, и useMemo в помощь, чтобы не устраивать всероссийскую перерисовку из-за ерунды.

Именно эту штуку, кстати, все крупные библиотеки и используют. Redux, React Router — они все там под капотом на провайдерах работают, чтобы дать тебе глобальный доступ к стору или истории маршрутизации из любого закоулка приложения. Удобно, блядь. Но как и любая мощная хуйня, требует аккуратности, а то так и до перформансных костылей недалеко.