この記事では、アプリから 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,
  };
};

use-app-events という npm パッケージを使用して、useTheme フックのすべてのインスタンスが通信してテーマの状態を同期できるようにしました。これにより、アプリ内で useTheme が複数回呼び出されたときに、テーマの値が同じになることが保証されます。

さらに、use-app-events パッケージのおかげで、テーマはブラウザのタブ間でも同期されます。

この時点では、useTheme フックをアプリ内のどこでも使用して現在のテーマを取得して更新できるため、ThemeContext は必要なくなりました。

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

  updateTheme('light');

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

このアプローチの長所は何ですか:

1. 子供たちが使用する前にツリーのどこかにフックを設定する必要はありません (テスト環境を含む);
2. レンダリング構造がより明確になり、コンテキストから構築された紛らわしい矢印の形の構造がなくなりました。
3. タブ間で状態が同期されています。

結論

React.Context は確かに少し前には強力なツールでしたが、use-app-events パッケージと組み合わせて適切に実装されていれば、フックはアプリのグローバルな状態を管理するためのより制御された信頼性の高い方法を提供します。