SlideShare a Scribd company logo
React v18 alpha 発表🎉
next
A gradual adoption strategy
通常のメジャーReact リリースに匹敵するレベルの労力で、

アプリケーションコードに最小限の変更を加えるか、
まったく変更を加えずにReact18 にアップグレードできます
17 もそんな感じでしたね。
next
目玉その1 -Concurrent Rendering-
以前はConcurrent Mode と呼ばれていたあれです
並列レンダリング
一度DOM が更新/レンダリングされるとSTOP できない(ブロッキング)
concurrent だと中断可能
キーを押した時にいつまで経ってもinput が反映されない… -> ブロッキングしているせい。入力フィールド
を表示させつつ、メモリ内の処理が終わると更新後のレンダーを走らせることができる。
next
目玉その1 -Concurrent Rendering-
Concurrent Mode から変わったのはなぜ?
必要な場所だけオプトインになった
0 - 100 だったMode とは違う
予定される機能たち
startTransition ・・・コストの高い状態遷移においてUI の応答性を維持する
useDefferedValue ・・・画面の重要度の低い部分の更新を先延ばしする
<SuspenseList> ・・・ロードインジケータが表示される順序のコントロール
next
` `
` `
` `
目玉その2 -Automatic Batching-
連続して複数回state を更新すると、複数回再レンダリングが起きてしまう。
これを1 度のレンダリングで良いように進化!
デフォルトでついているので、オプトアウト希望の場合は flushSync を使う。
バッチ処理とは、React が複数の状態の更新を1 つの再レンダリングにグループ化して、パフォーマンスを
向上させること
next
` `
目玉その3 -StrictMode でのuseEffect-
useEffect(() => { /* ... */ }, []) でもuseEffect を二回走らせる(mount -> unmount -> mount)
なぜこのタイミングで追加されたのか?
Concurrent Rendering の実装
Offscreen API の実装予定
Fast Refresh
どれも複数回エフェクトが発火する可能性を孕む
next
https://github.com/reactwg/react-18/discussions/19
` `
目玉その3 -StrictMode でのuseEffect-
実装で注意するべき点は?
Offscreen やSuspense を使わなければ本番では大丈夫
将来的には怪しいので、 useRef を使いましょう。
今話し合われている内容
console.log が毎度呼び出されるのは辛い、ミュートする必要があるのでは?
実際にはcleanup も走るので、副作用は(ちゃんと設計すれば)残らない
next
` `

More Related Content

Similar to React v18 alpha 発表

The Basics of programming
The Basics of programmingThe Basics of programming
The Basics of programming
692sfrobotics
 
Using Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App DevelopmentUsing Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App Development
Ben Lau
 
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
The Linux Foundation
 
Dolibarr - What's new in 12.0 - Webinare 2020
Dolibarr - What's new in 12.0 - Webinare 2020Dolibarr - What's new in 12.0 - Webinare 2020
Dolibarr - What's new in 12.0 - Webinare 2020
Laurent Destailleur
 
Compose Camp - Session3.pptx
Compose Camp - Session3.pptxCompose Camp - Session3.pptx
Compose Camp - Session3.pptx
GDSCAtharvaCollegeOf
 
Green Custard Friday Talk 22: Flutter
Green Custard Friday Talk 22: FlutterGreen Custard Friday Talk 22: Flutter
Green Custard Friday Talk 22: Flutter
Green Custard
 
Web-development-git
Web-development-gitWeb-development-git
Web-development-git
Bridh Athanatos
 
Redux workshop
Redux workshopRedux workshop
Redux workshop
Imran Sayed
 
Presentation
PresentationPresentation
Presentation
Aanchal Batra
 
React DOM/Virtual DOM
React DOM/Virtual DOMReact DOM/Virtual DOM
React DOM/Virtual DOM
RajasreePothula3
 
Cloud-Native Progressive Delivery
Cloud-Native Progressive DeliveryCloud-Native Progressive Delivery
Cloud-Native Progressive Delivery
Matt Turner
 
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
Pin-Ying Tu
 
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
apidays
 
Modul PLC Programming.pdf
Modul PLC Programming.pdfModul PLC Programming.pdf
Modul PLC Programming.pdf
MOCHAMAD RIZKY BINTANG ARDYANSYAH
 
COMPUTER ORGANIZATION.pptxbkobuujghuujjj
COMPUTER ORGANIZATION.pptxbkobuujghuujjjCOMPUTER ORGANIZATION.pptxbkobuujghuujjj
COMPUTER ORGANIZATION.pptxbkobuujghuujjj
AnujyotiDe
 
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
Codemotion
 
Globant development week / React Redux Rorkshop
Globant development week / React Redux RorkshopGlobant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
Globant
 
Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!
Prashant Kalkar
 
What's New in OpenLDAP
What's New in OpenLDAPWhat's New in OpenLDAP
What's New in OpenLDAP
LDAPCon
 
Basic Debugging
Basic DebuggingBasic Debugging
Basic Debugging
Sathish Kumar G
 

Similar to React v18 alpha 発表 (20)

The Basics of programming
The Basics of programmingThe Basics of programming
The Basics of programming
 
Using Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App DevelopmentUsing Web Software Architecture in Traditional Desktop App Development
Using Web Software Architecture in Traditional Desktop App Development
 
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
XPDDS17: Approach to Native Applications in XEN on ARM - Volodymyr Babchuk, E...
 
Dolibarr - What's new in 12.0 - Webinare 2020
Dolibarr - What's new in 12.0 - Webinare 2020Dolibarr - What's new in 12.0 - Webinare 2020
Dolibarr - What's new in 12.0 - Webinare 2020
 
Compose Camp - Session3.pptx
Compose Camp - Session3.pptxCompose Camp - Session3.pptx
Compose Camp - Session3.pptx
 
Green Custard Friday Talk 22: Flutter
Green Custard Friday Talk 22: FlutterGreen Custard Friday Talk 22: Flutter
Green Custard Friday Talk 22: Flutter
 
Web-development-git
Web-development-gitWeb-development-git
Web-development-git
 
Redux workshop
Redux workshopRedux workshop
Redux workshop
 
Presentation
PresentationPresentation
Presentation
 
React DOM/Virtual DOM
React DOM/Virtual DOMReact DOM/Virtual DOM
React DOM/Virtual DOM
 
Cloud-Native Progressive Delivery
Cloud-Native Progressive DeliveryCloud-Native Progressive Delivery
Cloud-Native Progressive Delivery
 
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
超級全能危樓改造王 - 增建、改建、打掉重建你的軟體架構?
 
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
apidays LIVE Australia 2020 - Move to the next generation API ecosystem by lo...
 
Modul PLC Programming.pdf
Modul PLC Programming.pdfModul PLC Programming.pdf
Modul PLC Programming.pdf
 
COMPUTER ORGANIZATION.pptxbkobuujghuujjj
COMPUTER ORGANIZATION.pptxbkobuujghuujjjCOMPUTER ORGANIZATION.pptxbkobuujghuujjj
COMPUTER ORGANIZATION.pptxbkobuujghuujjj
 
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
Democratizing Serverless: the New Open Source, Cloud Agnostic Functions Platf...
 
Globant development week / React Redux Rorkshop
Globant development week / React Redux RorkshopGlobant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
 
Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!
 
What's New in OpenLDAP
What's New in OpenLDAPWhat's New in OpenLDAP
What's New in OpenLDAP
 
Basic Debugging
Basic DebuggingBasic Debugging
Basic Debugging
 

Recently uploaded

ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have oneISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
Las Vegas Warehouse
 
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
171ticu
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
Hitesh Mohapatra
 
Welding Metallurgy Ferrous Materials.pdf
Welding Metallurgy Ferrous Materials.pdfWelding Metallurgy Ferrous Materials.pdf
Welding Metallurgy Ferrous Materials.pdf
AjmalKhan50578
 
Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
Prakhyath Rai
 
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECTCHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
jpsjournal1
 
Software Quality Assurance-se412-v11.ppt
Software Quality Assurance-se412-v11.pptSoftware Quality Assurance-se412-v11.ppt
Software Quality Assurance-se412-v11.ppt
TaghreedAltamimi
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
Victor Morales
 
Curve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods RegressionCurve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods Regression
Nada Hikmah
 
International Conference on NLP, Artificial Intelligence, Machine Learning an...
International Conference on NLP, Artificial Intelligence, Machine Learning an...International Conference on NLP, Artificial Intelligence, Machine Learning an...
International Conference on NLP, Artificial Intelligence, Machine Learning an...
gerogepatton
 
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
Yasser Mahgoub
 
Null Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAMNull Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAM
Divyanshu
 
Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...
IJECEIAES
 
AI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptxAI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptx
architagupta876
 
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.pptUnit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
KrishnaveniKrishnara1
 
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
IJECEIAES
 
Material for memory and display system h
Material for memory and display system hMaterial for memory and display system h
Material for memory and display system h
gowrishankartb2005
 
spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
Madan Karki
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Sinan KOZAK
 
22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt
KrishnaveniKrishnara1
 

Recently uploaded (20)

ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have oneISPM 15 Heat Treated Wood Stamps and why your shipping must have one
ISPM 15 Heat Treated Wood Stamps and why your shipping must have one
 
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
 
Welding Metallurgy Ferrous Materials.pdf
Welding Metallurgy Ferrous Materials.pdfWelding Metallurgy Ferrous Materials.pdf
Welding Metallurgy Ferrous Materials.pdf
 
Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
 
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECTCHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
CHINA’S GEO-ECONOMIC OUTREACH IN CENTRAL ASIAN COUNTRIES AND FUTURE PROSPECT
 
Software Quality Assurance-se412-v11.ppt
Software Quality Assurance-se412-v11.pptSoftware Quality Assurance-se412-v11.ppt
Software Quality Assurance-se412-v11.ppt
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
 
Curve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods RegressionCurve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods Regression
 
International Conference on NLP, Artificial Intelligence, Machine Learning an...
International Conference on NLP, Artificial Intelligence, Machine Learning an...International Conference on NLP, Artificial Intelligence, Machine Learning an...
International Conference on NLP, Artificial Intelligence, Machine Learning an...
 
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
 
Null Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAMNull Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAM
 
Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...Advanced control scheme of doubly fed induction generator for wind turbine us...
Advanced control scheme of doubly fed induction generator for wind turbine us...
 
AI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptxAI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptx
 
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.pptUnit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
Unit-III-ELECTROCHEMICAL STORAGE DEVICES.ppt
 
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...
 
Material for memory and display system h
Material for memory and display system hMaterial for memory and display system h
Material for memory and display system h
 
spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
 
22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt
 

React v18 alpha 発表

  • 1. React v18 alpha 発表🎉 next
  • 2. A gradual adoption strategy 通常のメジャーReact リリースに匹敵するレベルの労力で、 アプリケーションコードに最小限の変更を加えるか、 まったく変更を加えずにReact18 にアップグレードできます 17 もそんな感じでしたね。 next
  • 3. 目玉その1 -Concurrent Rendering- 以前はConcurrent Mode と呼ばれていたあれです 並列レンダリング 一度DOM が更新/レンダリングされるとSTOP できない(ブロッキング) concurrent だと中断可能 キーを押した時にいつまで経ってもinput が反映されない… -> ブロッキングしているせい。入力フィールド を表示させつつ、メモリ内の処理が終わると更新後のレンダーを走らせることができる。 next
  • 4. 目玉その1 -Concurrent Rendering- Concurrent Mode から変わったのはなぜ? 必要な場所だけオプトインになった 0 - 100 だったMode とは違う 予定される機能たち startTransition ・・・コストの高い状態遷移においてUI の応答性を維持する useDefferedValue ・・・画面の重要度の低い部分の更新を先延ばしする <SuspenseList> ・・・ロードインジケータが表示される順序のコントロール next ` ` ` ` ` `
  • 5. 目玉その2 -Automatic Batching- 連続して複数回state を更新すると、複数回再レンダリングが起きてしまう。 これを1 度のレンダリングで良いように進化! デフォルトでついているので、オプトアウト希望の場合は flushSync を使う。 バッチ処理とは、React が複数の状態の更新を1 つの再レンダリングにグループ化して、パフォーマンスを 向上させること next ` `
  • 6. 目玉その3 -StrictMode でのuseEffect- useEffect(() => { /* ... */ }, []) でもuseEffect を二回走らせる(mount -> unmount -> mount) なぜこのタイミングで追加されたのか? Concurrent Rendering の実装 Offscreen API の実装予定 Fast Refresh どれも複数回エフェクトが発火する可能性を孕む next https://github.com/reactwg/react-18/discussions/19 ` `
  • 7. 目玉その3 -StrictMode でのuseEffect- 実装で注意するべき点は? Offscreen やSuspense を使わなければ本番では大丈夫 将来的には怪しいので、 useRef を使いましょう。 今話し合われている内容 console.log が毎度呼び出されるのは辛い、ミュートする必要があるのでは? 実際にはcleanup も走るので、副作用は(ちゃんと設計すれば)残らない next ` `