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
useImperativeHandle を迷いながら使った話
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
kamiyam
October 04, 2024
Programming
0
87
useImperativeHandle を迷いながら使った話
React Osaka 2024 10
kamiyam
October 04, 2024
Tweet
Share
More Decks by kamiyam
See All by kamiyam
sqlcを利用してsqlに型付けを
kamiyam
1
590
GraphQLで使うデータに TypeScriptで型を定義する
kamiyam
1
620
Other Decks in Programming
See All in Programming
AI巻き込み型コードレビューのススメ
nealle
1
220
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
280
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
620
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
Apache Iceberg V3 and migration to V3
tomtanaka
0
160
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
380
CSC307 Lecture 06
javiergs
PRO
0
680
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
130
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
430
Featured
See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Producing Creativity
orderedlist
PRO
348
40k
YesSQL, Process and Tooling at Scale
rocio
174
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
80
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Transcript
useImperativeHandle Λ໎͍ͳ͕Βͬͨ React Osaka 2024 10 2024.10.4 @kamiyam
ࣗݾհ ͔ΈΜ (X@kamiyam) ݩࣗಈंඋ࢜ METEORWORKS Inc. Engineer ϑϩϯτʙ όοΫΤϯυ JavaScript/Node.js
શൠ
useImperativeHandle
useImperativeHandleΛ(༷తʹ)໎͍ͳ͕Β ͓ͬͨ
ࣄͷى͜Γ
form Λ·ͱΊͨίϯϙʔωϯτΛ࣮
detailValues ͷΛϦηοτ(ॳظʹ͢)Λ࣮͍ͨ͠ ͱ͍͏ཁ͕ग़ͨ ͦͯ͠ϦηοτΛ੍ޚ͢Δཁૉ֎෦ʹଘࡏ͢Δ
DetailForm ͷ֎෦͔ΒϦηοτॲཧΛߦ͏ ͱ͍͏࣮͕ඞཁ
detailValues ʹͨ͠ॳظΛmemo͓͍ͯͯ͠ Ϧηοτ࣮ߦ࣌ʹpropsΛ࠶͢? ͘͠isInitial Έ͍ͨͳϑϥάΛpropsͰ͢?
VTF*NQFSBUJWF)BOEMF VTF*NQFSBUJWF)BOEMFɺSFGͱͯ͠ެ։͞ΕΔϋϯυϧΛ ΧελϚΠζ͢ΔͨΊͷ3FBDUϑοΫͰ͢ɻ IUUQTSFBDUEFWSFGFSFODFSFBDUVTF*NQFSBUJWF)BOEMF
IUUQTSFBDUEFWSFGFSFODFSFBDUVTF*NQFSBUJWF)BOEMF
None
None
None
None
࣮ʹ͍ͭͯ https://ja.react.dev/reference/react/useImperativeHandle Λݩʹղઆ͠·͢
ͭ·Γ ref Λ௨ͯ͡ίϯϙʔωϯτʹ ॲཧΛੜ͢͜ͱ͕Ͱ͖Δɻͱ͍͏͜ͱ
ར༻ऀͱͯ͠ΊͪΌศར͕ͩ props(ม)Λ༻͍ͯৼΔ͍͕มΘΔͷ͕ ຊདྷͷܗͳͷͰ?
https://ja.react.dev/reference/react/useImperativeHandle
https://react.dev/reference/react/useImperativeHandle
“ྫ͑ɺModal ίϯϙʔωϯτ͔Β { open, close } ͷΑ͏ͳ໋ྩ ܕͷϋϯυϧΛެ։͢ΔͷͰͳ͘ɺ<Modal isOpen={isOpen} />
ͷΑ͏ʹɺisOpen Λ props ͱͯ͠ड͚औΔํ͕ྑ͍Ͱ͠ΐ͏ɻ ໋ྩܕͷಈ࡞Λ props ͱͯ͠ެ։͢ΔࡍʹΤϑΣΫτཱ͕ͪ ·͢ɻ”
IUUQTSFBDUEFWMFBSOTZODISPOJ[JOHXJUIF ff FDUT
ΤϑΣΫτͷ߲Ͱ props isPlaying:boolean ʹΑͬͯৼΔ͍͕มΘ͍ͬͯΔ
ͳΔ΄ͲΘ͔ΒΜ…🤦
ܾఆతͳ͑Λ୳ͯ͠·࣮ͨ͢ΔʑͳͷͰ͋ͬͨ…
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
Refs. useImperativeHandle https://react.dev/reference/react/useImperativeHandle Synchronizing with Effects https://react.dev/learn/synchronizing-with-effects