React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]

はじめに 🚩 この記事では、Tanstack Query や SWR などのライブラリに頼らずに、React 標準の Hooks をふんだんに活用してチャット機能を実装する方法を紹介します。 RC（Release Candidate）段階ではありますが、React 19 で追加された useActionState と useOptimistic を使うことで、よりインタラクティブで快適な UI/UX を実現する方法を探っていきます。 また筆者の過去の記事ではそれぞれの Hooks に焦点を当てた記事を書いているので、そちらもあわせて参照してください。 実装例 📝 はじめに完成した状態のデモアプリを示します。 楽観的更新によりチャットメッセージが送信されるとデータベースにデータが保存されたかどうかに関わらず即座に表示され、メッセージの送信中かどうかによってアイコンが切り替わっています。