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
90
React version 19 追加機能をまとめる
チームの勉強会で使用した資料になります。
急いで作成した資料のため、内容として説明不足や間違った解釈をしている箇所があるかもしれません。もしお気づきの方は、ご連絡いただけますと幸いです。
つちのこ
May 29, 2025
Tweet
Share
More Decks by つちのこ
See All by つちのこ
Reactの歴史を振り返る
tutinoko
1
220
フロントエンドエンジニアもGPTの裏側を理解したい
tutinoko
0
61
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
1.7k
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
630
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
790
NIKKEI Tech Talk#38
cipepser
0
180
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
マンガアプリViewerの大画面対応を考える
kk__777
0
100
Go言語はstack overflowの夢を見るか?
logica0419
0
520
Ktorで簡単AIアプリケーション
tsukakei
0
100
CSC509 Lecture 07
javiergs
PRO
0
240
Google Opalで使える37のライブラリ
mickey_kubo
3
140
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
11
38k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Designing for humans not robots
tammielis
254
26k
Visualization
eitanlees
149
16k
Code Review Best Practice
trishagee
72
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
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の配下でデータの取得を行う際、簡単に非同期の実装を行うことができます。