В этой статье мы рассмотрим, как избавиться от React.Context в ваших приложениях, и найдем для этого мотивацию.

Вы, вероятно, знакомы с React и, возможно, уже имели опыт работы с React.Context, если вы попали на эту статью, но если нет, все равно не стесняйтесь ее прочитать и поделиться с людьми, которым это может быть интересно.

1. Почему стоит избегать React.Context?

Контекст ухудшает читабельность, запутывает и ограничивает приложение.

Просто взгляните на этот простой пример:

Выглядит не слишком понятно и достоверно, не так ли?

Вот некоторые потенциальные проблемы при использовании контекстов:

1. Чем больше контекстов используется, тем менее читаемым и управляемым становится ваше приложение;
2. Иногда для работы вложенных контекстов требуется правильный порядок, что затрудняет поддержку вашего приложения;
3. Некоторые контексты следует использовать повторно во время настройки тестовой среды, чтобы обеспечить правильную работу;
4. Вы должны убедиться, что компонент является дочерним в дереве необходимого поставщика контекста.

Забавный факт: всем известный «ад обещаний» похож ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. Как заменить React.Context?

Вместо этого создайте перехватчики.

Давайте заменим ThemeContext из примера выше на собственный хук useTheme:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Мы использовали пакет npm под названием use-app-events, чтобы позволить всем экземплярам хука useTheme взаимодействовать для синхронизации состояния их темы. Это гарантирует, что значение темы будет одинаковым при многократном вызове useTheme в приложении.

Более того, благодаря пакету use-app-events тема будет синхронизироваться даже между вкладками браузера.

На этом этапе ThemeContext больше не нужен, поскольку хук useTheme можно использовать в любом месте приложения, чтобы получить текущую тему и обновить ее:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

Каковы плюсы подхода:

1. Нет необходимости устанавливать привязку где-то вверху по дереву, прежде чем дети смогут его использовать (включая тестовые среды);
2. Структура рендеринга стала чище, а это значит, что больше не будет запутанной структуры в форме стрелки, построенной на основе вашего контекста;
3. Состояние синхронизируется между вкладками.

Заключение

Некоторое время назад React.Context, конечно, был мощным инструментом, но хуки обеспечивают более контролируемый и надежный способ управления глобальным состоянием вашего приложения, если они правильно реализованы в сочетании с пакетом use-app-events.