Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React version 19 追加機能をまとめる
Search
つちのこ
May 29, 2025
Programming
0
62
React version 19 追加機能をまとめる
チームの勉強会で使用した資料になります。
急いで作成した資料のため、内容として説明不足や間違った解釈をしている箇所があるかもしれません。もしお気づきの方は、ご連絡いただけますと幸いです。
つちのこ
May 29, 2025
Tweet
Share
More Decks by つちのこ
See All by つちのこ
Reactの歴史を振り返る
tutinoko
1
110
フロントエンドエンジニアもGPTの裏側を理解したい
tutinoko
0
26
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
1.6k
Other Decks in Programming
See All in Programming
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
680
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
270
型で語るカタ
irof
1
820
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
700
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
AIのメモリー
watany
11
970
テスト駆動Kaggle
isax1015
1
890
iOS開発スターターキットの作り方
akidon0000
0
180
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
A designer walks into a library…
pauljervisheath
207
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Speed Design
sergeychernyshev
32
1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
30
14k
Gamification - CAS2011
davidbonilla
81
5.4k
Embracing the Ebb and Flow
colly
86
4.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
React version 19 追加機能をまとめる
目次 - React 19 の概要 - React 19 の追加機能① -
React 19 の追加機能② - React 19 の追加機能③ - React 19 の追加機能④ - React 19 の追加機能⑤ - まとめ
React 19 の概要 追加機能を一言で表すと「フォーム周りの機能」の追加になります。 もう少し具体的に言うと、フォーム周りの機能 = 追加・更新系API を取り扱 う機能になります。
React 19 の概要 追加機能を一言で表すと「フォーム周りの機能」の追加になります。 もう少し具体的に言うと、フォーム周りの機能 = 追加・更新系API を取り扱 う機能になります。 CARUの管理画面ではデータの追加・更新・削除の頻度が高いため、今後
Reactのアップデートを行う際に、今回の発表内容を追加したいと思ってい ます。 React 19 公式のブログ 関わっているサービス名のため伏せてます
追加機能①
React 19 の追加機能① useTransition バックグラウンドで UI の一部をレンダリングできる React Hook です。
本来は、React 18 のバージョンで追加されましたが、React 19 で非同期処 理でも使用できるよう拡張が行われました。
React 19 の追加機能① useTransition バックグラウンドで UI の一部をレンダリングできる React Hook です。
本来は、React 18 のバージョンで追加されましたが、React 19 で非同期処 理でも使用できるよう拡張が行われました。 簡単に説明すると、非同期の処理が完了するまでの待機状態(pending)を 管理してくれます。
React 19 の追加機能① const [name, setName] = useState(""); const [isPending,
startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> );
React 19 の追加機能① const [name, setName] = useState(""); const [isPending,
startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> ); 待機中かどうかの値(isPending)と待機中かど うかを判別するための関数を返します
React 19 の追加機能① const [name, setName] = useState(""); const [isPending,
startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> ); 待機中かどうかの値(isPending)と待機中かど うかを判別するための関数を返します 非同期の処理を行なっている箇所を包括する形 で判別の関数を使用し、待機中の値の更新を行 なってくれます
追加機能②
React 19 の追加機能② useActionState フォームアクションの結果に基づいて状態を更新できる React Hook です。 データの更新を行う際に、その更新結果や状態を使用する場合に活用するこ とができる機能になっています。
useActionState フォームアクションの結果に基づいて状態を更新できる React Hook です。 データの更新を行う際に、その更新結果や状態を使用する場合に活用するこ とができる機能になっています。 簡単に説明すると、データ更新を行うためのデータ本体や更新処理、待機状 態などを管理してくれます。 React
19 の追加機能②
React 19 の追加機能② const [name, setName] = useState(""); const [state,
submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> )
React 19 の追加機能② const [name, setName] = useState(""); const [state,
submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> ) フォームの値(state)、フォームの送信の関数 (submitAction)、待機中かどうかの値 (isPending)の値をそれぞれ返します。
React 19 の追加機能② const [name, setName] = useState(""); const [state,
submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> ) フォームの値(state)、フォームの送信の関数 (submitAction)、待機中かどうかの値 (isPending)の値をそれぞれ返します。 第一引数に、フォームの送信の関数を渡し、第 二引数にフォームの初期値を渡します。
追加機能③
React 19 の追加機能③ useFormStatus フォーム送信のステータス情報を提供する React Hook です。 <form>タグを使用したフォームの送信を行う際に、そのフォームの更新状 態を子要素でも取得できるようになる機能になっております。
React 19 の追加機能③ useFormStatus フォーム送信のステータス情報を提供する React Hook です。 <form>タグを使用したフォームの送信を行う際に、そのフォームの更新状 態を子要素でも取得できるようになる機能になっております。
簡単に説明すると、<form>タグを使用したフォームの送信の待機状態を propsでバケツリレーせずとも、useFromStateで取得することができます。
React 19 の追加機能③ const [name, setName] = useState(""); const [state,
submitAction] = useActionState( () => updateName({ id: "", name }), null ); return ( <form action={submitAction}> <input value={name} onChange={(e) => setName(e.target.value)} /> <FormStatusItem /> {state && <p>{ state.name }</p>} </form> ) export const FormStatusItem = () => { const {pending, data} = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ) };
React 19 の追加機能③ const [name, setName] = useState(""); const [state,
submitAction] = useActionState( () => updateName({ id: "", name }), null ); return ( <form action={submitAction}> <input value={name} onChange={(e) => setName(e.target.value)} /> <FormStatusItem /> {state && <p>{ state.name }</p>} </form> ) export const FormStatusItem = () => { const {pending, data} = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ) }; 親のコンポーネントで行われているフォームの 送信に対しての値を取得できます。
追加機能④
React 19 の追加機能④ useOptimistic UI を楽観的に更新できる React Hook です。 非同期処理を行う場合に、処理成功後の状態を先にUIに反映を行う機能に
なっております。
React 19 の追加機能④ useOptimistic UI を楽観的に更新できる React Hook です。 非同期処理を行う場合に、処理成功後の状態を先にUIに反映を行う機能に
なっております。 簡単に説明すると、更新を行う際にサーバーに送信するデータを先にUIに反 映し、更新結果を即座にユーザーが見れる状態にすることができます。
React 19 の追加機能④ const [name, setName] = useState(""); const [state,
setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> );
React 19 の追加機能④ const [name, setName] = useState(""); const [state,
setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> ); 管理しているデータ(optimistic)と、その データを更新する関数(setOptimistic)を返 す。
React 19 の追加機能④ const [name, setName] = useState(""); const [state,
setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> ); 管理しているデータ(optimistic)と、その データを更新する関数(setOptimistic)を返 す。 第一引数に初期値を渡し、第二引数に管理して いる値を更新するための関数を渡します。
追加機能⑤
React 19 の追加機能⑤ use Promise などのリソースの値を読み取ることができる React API です。 Suspense
の配下で使用でき、async/awaitを使用せずに非同期の処理を行 なってくれるような機能になっております。 Suspense … データ取得の完了までの表示を管理してくれるコンポーネント
use Promise などのリソースの値を読み取ることができる React API です。 Suspense の配下で使用でき、async/awaitを使用せずに非同期の処理を行 なってくれるような機能になっております。 簡単に説明すると、Suspenseの配下でデータの取得を行う際、useを使うこ
とで簡単に非同期の実装を行うことができます。 React 19 の追加機能⑤ Suspense … データ取得の完了までの表示を管理してくれるコンポーネント
React 19 の追加機能⑤ import { Suspense } from 'react'; export
const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) };
React 19 の追加機能⑤ import { Suspense } from 'react'; export
const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) }; データ取得を行うコンポーネントの親要素で Suspenseを使用する。
React 19 の追加機能⑤ import { Suspense } from 'react'; export
const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) }; データ取得を行うコンポーネントの親要素で Suspenseを使用する。 データ取得を行うためのPromiseの値をuse API に渡し、非同期のデータを取得できる。
まとめ useTransition 非同期の処理が完了するまでの待機状態(pending)を管理してくれます。 useActionState データを更新を行うためのデータや更新処理、待機状態などを管理してくれます。 useFormStatus <form>タグを使用したフォームの送信の待機状態をバケツリレーせずとも、取得することができます。 useOptimistic 更新を行う際に送信するデータを先にUIに反映し、結果を即座に見れる状態にすることができます。 use
Suspenseの配下でデータの取得を行う際、簡単に非同期の実装を行うことができます。