#фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

Ну, на самом деле, нет. Если вы упоро упёртый любитель контекстов и отрицаете любые внешние стейт-менеджеры, то запросто можете оказаться в подобной ситуации. Да даже если и не отрицаете, всё равно пара-тройка контекстов там будет.

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!

const AppProvider = compose(
  UserProvider,
  ThemeProvider.
  MenusProvider,
  SupportProvider,
  ErrorProvider,
  StateProvider,
);

И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose

#фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

Ну, на самом деле, нет. Если вы упоро упёртый любитель контекстов и отрицаете любые внешние стейт-менеджеры, то запросто можете оказаться в подобной ситуации. Да даже если и не отрицаете, всё равно пара-тройка контекстов там будет.

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!


const AppProvider = compose(
UserProvider,
ThemeProvider.
MenusProvider,
SupportProvider,
ErrorProvider,
StateProvider,
);


И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose #бородач

#заметка дня

Джордж Моллер (George Moller) — техлид в Shopify — предлагает интересное решение одной наболевшей в React проблемы. И проблема эта — ререндер всех компонентов, зависящих от некоего контекста.

Ну просто потому что useContext сработает на любое изменение данных в контексте, очевидно.

И решение это — кастомный хук useContextSelector: https://github.com/dai-shi/use-context-selector

И вроде всё бы ничего, вот только если вам пришлось это делать — вы используете контекст не очень верно. И лучше бы перейти на Jotai, Zustand, Effector, Reatom и так далее. На любой современный стейт-менеджер, короче говоря.

Контекст — он для чего-то глобального. Тема, данные пользователя, информация о лицензии. Плюс, совсем не обязательно хранить огромный контекст на всё приложение. Можно иметь много контекстов на разные зоны ответственности — в этом же вся его прелесть.

Но если уж вы попали в подобную ситуацию — да, useContextSelector спасёт.

Хотя я бы не стал.

#react #context #hook