数日前、私は新しい部署に慣れました。新しい同僚から、既存の React プロジェクトをリファクタリングするというタスクが与えられました。

コードを読んでいたとき、Context API の使用方法に衝撃を受けました。以前のコーダーは、すべて (はい、ほぼすべて) を Context オブジェクトに入れ、それをすべての状態と一部のローカル一時状態を管理するストアとして扱いました。それは正気の沙汰ではない！

また、彼は 1 つの .ts ファイル内の 1 つだけ (はい、絶対に 1 つだけ) コンポーネントでページのすべてをコーディングします。コードのロジックを頭の中で明確にするのはとても難しいです。しかし、それでも私はこれらのクソコードを受け入れます (選択の余地はありません)。 そこで、私は大きな決断を下します。Mobx を使用してこれらすべてのページを 1 週間で書き直し、コードをさまざまな機能コンポーネントに分割します。

Mobx を使用して、API からのすべてのデータを処理するためにいくつかのストアを作成し、1 つの巨大なコンポーネントをさまざまな小さな部分に分割します。すべてが明確かつシンプルになり始めます。ローカル状態は、それが使用されるスコープ内にある必要があります。共通部分は Mobx のストアから取得されます。

ついに Context オブジェクトを完全に削除し、数千行のコードが削除され、世界は再び静かになりました。

Context API について言いたいことがあります。アプリ全体で共有するグローバル構成情報など、実際に何かがある場合は、Context API を使用できます。ただし、サードパーティの状態管理ライブラリの使用を避けたいだけの場合、コンテキストを交換。

Context を Context にし、状態を Mobx などのライブラリで管理します。

React Context API の悪用をやめてください!