要約 / ポイント
Reactでモーダルやダイアログを管理することは、しばしばpropsとstateが絡み合った混乱を引き起こします。`react-call`と呼ばれる小さなユーティリティは、コンポーネントをシンプルな非同期関数のように呼び出すことで、状況を一変させます。
私たちが皆書いているスパゲッティコード
ReactでインタラクティブなUIを管理することは、すぐに絡み合った混乱へと発展します。開発者は、一般的な`isOpen`の状態や`onClose`ハンドラを、無関係なコンポーネントの層を介して、コンポーネントツリーの奥深くまで日常的にprop drillします。これにより、親コンポーネントは直接的な関心がない場合でも子UIの可視性を管理することを強いられ、意図を不明瞭にし、アプリケーション全体でのコンポーネントの再利用性を複雑にします。
この広範なパターンは、UIの状態とコアビジネスロジックを密接に結合させ、多数のファイルに制御を分散させます。その結果、シンプルな確認モーダルや多段階フォームウィザードが、相互接続された`useState`呼び出しと`useEffect`フックの網となる、典型的なスパゲッティコードが生まれます。このような密接に結合されたロジックは、追跡、デバッグ、リファクタリングが困難であり、わずかなUI調整が大きな開発作業へと変わってしまいます。
Context APIや`React Portals`のような従来のソリューションは、これらの問題に対して部分的な解決策しか提供しません。Contextは冗長なプロバイダーとコンシューマーを必要とし、かなりのボイラープレートを追加します。PortalsはDOM要素を分離しますが、状態管理や制御フローに対する本質的な解決策は提供しません。決定的に重要なのは、どちらも根本的なアーキテクチャ上の課題を解決していないことです。それは、直接的で実行可能な値を返す非同期関数のようにUIコンポーネントを呼び出すことであり、開発者を分断されたコールバック主体の手法に追い込んでいます。
コンポーネントを非同期関数のように呼び出す
`react-call`はインタラクティブなUI管理を再定義します。これはネイティブブラウザの`window.confirm` APIを模倣しており、コンポーネントが実行を一時停止できるようにすることで、直感的でブロッキングなモデルを現代のReactに直接もたらします。
コンポーネントを非同期関数のように呼び出します: `await Confirm.call()`。実行は一時停止し、OKまたはキャンセルクリックのようなユーザー入力を待ってから再開します。これにより、ビジネスロジックは呼び出し元コンポーネントに対して線形で局所的に保たれ、複雑なワークフローが簡素化されます。
アーキテクチャは劇的に変化します。`isModalOpen`状態変数を排除し、prop drillingをなくします。`onClose`や`onSubmit`コールバックを削除します。インタラクティブなUI要素のために複雑なコンテキストプロバイダーやポータルはもはや必要ありません。
`createCallable`でラップされた呼び出し可能なコンポーネントは、それ自身のマウントポイントとして機能します。これを任意の可視な場所にルートタグとして配置すると、リスナーとして機能します。`react-call`は内部スタックを介して複数のアクティブなインスタンスを管理し、レンダリングと終了アニメーションを処理します。
内部的には、`react-call`はプロミス管理を抽象化し、型付きのリクエスト/レスポンスをすぐに処理します。この軽量ユーティリティは、500B未満で依存関係はゼロです。完全な`hot module replacement`サポートにより、高速な開発サイクルが維持されます。
`react-call`アーキテクチャの内部
単一のRootコンポーネントが`react-call`の基盤を形成し、それ自身のマウントポイントとして機能します。この呼び出し可能なコンポーネントを、`App.js`のようなアプリケーション内の任意の可視な場所にルートタグとして配置すると、パッシブなリスナーとして機能します。複数の呼び出しがトリガーされた場合、`react-call`は内部スタックを介してそれらを管理し、レンダリング、クリーンな終了アニメーションを処理し、インスタンスの分離を自動的に保証します。
「Upsert は、グローバルな通知トーストやローディングオーバーレイのような、シングルトンUI要素にとって重要なパターンを提供します。`call()` が新しいインスタンスをプッシュするのに対し、`upsert()` は、単一のインスタンスのみがアクティブであるべきコンポーネントの重複を防ぎます。インスタンスが画面上にある場合、`upsert` は既存のコンポーネントを新しいデータでスムーズにリアルタイム更新し、冗長なUIを回避し、制御された単一インスタンスのレンダリングを保証します。」
「Mutation Flow の概念と `useMutationFlow` フックを使用して、UIをバックエンドアクションに直接接続します。このフックは保留中の状態を自動的に管理し、`async function` の実行中に確認モーダルなどの呼び出し可能なUIがローディングスピナーとともに開いたままになるようにします。呼び出しは、基になる `promise` が正常に完了した場合にのみ解決され、閉じられ、UIの状態とデータミューテーションを効果的に橋渡しします。手動の `call.end()` を含むこの明示的な制御により、ユーザーコンテキストを失うことなく、堅牢なエラー処理と再試行メカニズムが可能になります。react-call でより高度なパターンをご覧ください。」
「実用的なメリット」
「`react-call` を素早くデプロイできます。そのフットプリントは最小限で、<500B かつ `zero dependencies` であり、`bundle size` への影響はごくわずかです。任意の `React component` を `createCallable` `higher-order component` でラップするだけで、直接呼び出し可能な `awaitable UI primitive` に即座に変換できます。」
「単純な確認を超えて、`react-call` は複雑なインタラクティブフローのオーケストレーションに優れています。以下を実装できます。 - `Multi-step wizards` (複数ステップのウィザード) - `Dynamic item pickers` (動的なアイテムピッカー) - `Asynchronous form submissions` (統合されたローディング状態を持つ非同期フォーム送信)」
「`useMutationFlow` フックを利用して、呼び出し可能なUIを `backend actions` にシームレスに結び付け、`pending states` を管理し、`promise` が解決されるまでUIがアクティブな状態を維持するようにします。」
「これは単なる別のモーダルライブラリではありません。`react-call` は、コンポーネントのインタラクションを管理する方法における根本的な変化を意味します。状態管理のボイラープレートを排除し、`frontend toolkit` を整理し、`cleaner, more readable architecture` を提供します。`paradigm shift` を受け入れ、`rethink your UI` (UIを再考) しましょう。」
「よくある質問」
「`react-call` とは何ですか？」
「これは、開発者が `modals` や `dialogs` のような `React components` を、`asynchronous functions` であるかのように呼び出すことを可能にする軽量ユーティリティで、ユーザー入力で解決される `promise` を返します。」
「`react-call` は、`modals` に `React Context` を使用する場合とどう異なりますか？」
「`react-call` は、モーダルの状態を管理するためのグローバルな `context provider` の必要性を排除します。ビジネスロジックを呼び出し元のコンポーネントに局所化し、`prop drilling` や複雑な状態管理を回避します。」
「`react-call` の 'Upsert' 機能は何のためのものですか？」
「`Upsert` は、`toasts` や `loading spinners` のような `singleton UI patterns` のためのものです。新しいインスタンスを作成する代わりに、既存のコンポーネントインスタンスを新しいデータで更新し、一度に1つだけが画面に表示されるようにします。」
「`react-call` は `server-side rendering (SSR)` に適していますか？」
「`createCallable` および `Root` コンポーネントは `SSR` をサポートしています。ただし、`call()` メソッド自体は、ブラウザでのユーザーインタラクションに依存するため、`client-only` です。」