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
88
React version 19 追加機能をまとめる
チームの勉強会で使用した資料になります。
急いで作成した資料のため、内容として説明不足や間違った解釈をしている箇所があるかもしれません。もしお気づきの方は、ご連絡いただけますと幸いです。
つちのこ
May 29, 2025
Tweet
Share
More Decks by つちのこ
See All by つちのこ
Reactの歴史を振り返る
tutinoko
1
210
フロントエンドエンジニアもGPTの裏側を理解したい
tutinoko
0
61
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
1.7k
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.8k
CSC509 Lecture 01
javiergs
PRO
1
430
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
Build your own WebP codec in Swift
kishikawakatsumi
2
870
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
150
Learn CPU architecture with Assembly
akkeylab
1
1.3k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
430
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
900
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Gamification - CAS2011
davidbonilla
81
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
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の配下でデータの取得を行う際、簡単に非同期の実装を行うことができます。