フロントエンド開発の定番「React」バージョン18の新機能を解説──並行レンダーで操作感が向上！
本記事では、動的なWebページを構築するフロントエンド開発にとって定番ともいえるライブラリー「React」の最新版であるバージョン18について、新機能を紹介していきます。Webページの「並行レンダー」をベースに、画面更新の優先度指定や不要な画面更新の抑制など、Webページ利用者の操作感を向上する改善が行われています。 はじめに Reactは、動的なWebページのインターフェースを構築するためのJavaScriptライブラリーで、Facebookとオープンソースコミュニティによって開発が続けられています。 図1 Reactの公式ページ Reactは2022年3月にメジャーアップデートであるバージョン18（以下「React 18」がリリースされ、現在の最新バージョンは18.2.0です。React 18の概要は公式ブログ記事で紹介されています。 図2 React 18を紹介する公式ブログ記事 本
useEffectをやめて、Suspenseを使おう
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
ReactのSuspenseで非同期処理を乗りこなす
Reactはどちらかというと非同期処理が苦手な部類でした。今まではReduxのmiddlewareを駆使したり、Hooksを上手く使ったりして乗り切っていました。 そこで以前よりSuspenseという機能の実装が進んでいます。Suspenseはまだ世間に浸透しきっていない機能ですが、Reactの世界を大きく変える可能性があります。そんなSuspenseについて、軽く覗いてみましょう。 Suspenseの世界 Reactで非同期処理を綺麗に扱うのは簡単なことではありません。redux-sagaを使うにせよ、useEffectを使うにせよ、大きな痛みを伴います。 そもそもReactはアプリケーションのUI層を担当するライブリラリです。本来果たすべき責務に注力できず非同期処理のような些事に気を取られ、あろうことか非同期処理がReactアプリケーションの設計に大きな影響力を持ち始めるというのは、望
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
