Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React19 β をざっと見る

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for rakus frontend rakus frontend
May 23, 2024
Technology
360
0

React19 β をざっと見る

Avatar for rakus frontend

rakus frontend

May 23, 2024

More Decks by rakus frontend

See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
Avatar for rakus frontend rakus_fe
0
56
ErrorBoundaryとSuspenseの導入検討
Avatar for rakus frontend rakus_fe
1
820
日付をもう少し真面目に勉強中
Avatar for rakus frontend rakus_fe
0
56
Reactのパフォーマンス改善例
Avatar for rakus frontend rakus_fe
0
590
Typescript5.4の新機能
Avatar for rakus frontend rakus_fe
0
350
非破壊的な配列メソッド
Avatar for rakus frontend rakus_fe
0
420
ココがすごいぜ！Playwright Component Test
Avatar for rakus frontend rakus_fe
0
620
スプレッドシートのセル結合がつらいので足掻いてみた話
Avatar for rakus frontend rakus_fe
0
290

Other Decks in Technology

See All in Technology
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
120
Bedrock AgentCore RuntimeでAuth0 Changelog調査AIをアップグレードした話
Avatar for t.t t5u8a5a
1
140
SONiCのLinuxベースを活かしたZabbix監視
Avatar for SONiC Users Group Japan sonic
0
160
小さくはじめるSLI/SLO ～育てながら組織に定着させる実践知～ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
Avatar for Narimichi Takamura nari_ex
7
1.9k
フロンティアAIのゲート化と地政学リスク
Avatar for 長津孝輔 nagatsu
0
140
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
550
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
140
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜
Avatar for Uchide Hiroki(ucchi-) hanon52_
3
2.3k
SONiCの統計情報を取得したい
Avatar for SONiC Users Group Japan sonic
0
160
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
Avatar for kinako askokc
0
510

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
960
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
250
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
410
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
430
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
180
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
230

Transcript

  1. React 19 Beta をざっと見る 2024/05/21　伊藤

  2. 新機能: アクション • useTransitionを使用して、送信中状態やエラー 処理を簡単に管理。 • useActionStateとuseOptimisticによる楽観的更新 のサポート。 • 例:

  3. 新しいフック: use • レンダリング中にリソースを読み取る新API。 • 例:

  4. サーバコンポーネント • サーバ上で実行される非同期関数を呼び出 せるサーバアクションの導入。 • サーバコンポーネントを使用してバンドル前に コンポーネントを事前レンダー。 • 詳細はReact Server

    Componentsを参照。

  5. 改善点: refのprops化 • 関数コンポーネントでrefに直接アクセス可能 になった。 • forwordRefが不要になり、将来的に非推奨に なる予定。 • 例:

  6. コンテクストのプロバイダ • <Context.Provider>の代わりに<Context>を 使用可能に。 • 例:

  7. その他の改善 • refコールバックからクリーンアップ関数を返す 機能。 • 例:

  8. 参考文献 https://ja.react.dev/blog/2024/04/25/react-19