Async React時代の宣言的UI: デバウンスの例

ARANK

宣言的UIとは何か、皆さんは答えられるでしょうか。「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだと筆者は考えています。上述のようなDOMの更新の話はその一例にすぎません。やりたいこと: 特定の形のDOMを画面に表示したい。具体的なこと: Reactランタイムがコンポーネントツリーを実行してDOMを更新する。最適化: DOMをいい感じに差分更新する。また、useStateなどといったステート管理の概念を持ち出しているのも、宣言的UIだと捉えられます。やりたいこと: アプリケーションのロジックを、DOM操作ではなく単なるステートの計算として記述したい。具体的なこと: Reactランタイムがステートの変更に応じてコンポーネントを再レンダリングする。最適化: ステート更新のバッチ処理…