React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ - エンジニアHub｜Webエンジニアのキャリアを考える！

2023/07/14 127 users 群雄割拠 React Server Components

エンジニアHub > 記事一覧 > React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん... 続きを読む

useEffectをやめて、Suspenseを使おう

2023/05/05 132 users useEffect SWR React データフェッチ SPA

Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹... 続きを読む

最速攻略！　Reactの `use` RFC

2022/10/16 118 users RFC React use React界隈 前提知識

皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知ら... 続きを読む

React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita

2022/07/16 16 users SaaS Qiita taro Form React Hook

はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしている作っているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっと... 続きを読む

ReactのSuspense対応非同期処理を手書きするハンズオン

2021/12/28 18 users React ハンズオン ライブラリ 実用化 裏側

ReactのConcurrent Renderingで本格的に実用化されるSuspenseは、ライブラリを通して使うことになりがちでその裏側が見えにくいものです。この本では、手を動かしながら生のSuspenseの使い方を学びます。 続きを読む

Next.js 12

2021/10/26 89 users Next.js ＩＭＡ beta support

As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster buildsMiddleware (beta): Enabling full flexibility in Next.js with code over configurationReact 18 Support: Native Next.js APIs are now supported, as well as Suspense<Ima... 続きを読む

React.Suspenseの力を最大化する、GraphQLの次世代ディレクティブ@deferと@stream - nakamoriのblog

2020/11/10 6 users GraphQL stream defer React Blog

React.Suspenseの力を最大化する、GraphQLの次世代ディレクティブ@deferと@stream ReactのSuspense、素敵ですよね。 この記事ではGraphQLのワーキンググループで仕様の策定が進んでいる@deferと@streamについて解説します。@deferと@streamはReactのSuspenseの力を引き出す、注目すべきディレクティブです。 なお、これ... 続きを読む

?React 16.10 : 2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版） - Qiita

2019/10/27 69 users Qiita React Concurrent Mode 恩恵

React 16.10 : 2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版） 10月25日、Reactの新機能であるConcurrent Modeのプレビュー版が発表されました。この中には、Concurrent Modeの恩恵を得るために必要となる新しいAPIが含まれています。 これらのAPIの中心となるのが、Suspense... 続きを読む

WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQL

2019/02/07 16 users Apollo hooks React TypeScript

Fully functional WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQLAn open-source full-stack example app made with React 16.7 (Hooks & Suspense), TypeScript, GraphQL-Subscriptions/Codegen/Modules and PostgreSQL You might have seen it around already — an open-s... 続きを読む

Reactの新機能「Time Slicing」と「Suspense」をFacebookが紹介。非同期レンダリングを活用しUXをサクサクに向上 － Publickey

2018/03/06 160 users Facebook Publickey React Fiber

FacebookがReactの新機能「Time Slicing」と「Suspense」を紹介。非同期レンダリングを活用しUXをサクサクに向上 Reactの最新バージョンである「React 16」以降に予定されている新機能は、Reactの新コアアーキテクチャとしてReact 16から採用されたFiberによって実現される非同期レンダリングなどを活用。CPU能力が低いデバイスやネットワーク帯域が十分で... 続きを読む