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
kamiyam
October 04, 2024
Programming
0
80
useImperativeHandle を迷いながら使った話
React Osaka 2024 10
kamiyam
October 04, 2024
Tweet
Share
More Decks by kamiyam
See All by kamiyam
sqlcを利用してsqlに型付けを
kamiyam
1
510
GraphQLで使うデータに TypeScriptで型を定義する
kamiyam
1
610
Other Decks in Programming
See All in Programming
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
750
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
210
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
rage against annotate_predecessor
junk0612
0
170
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
310
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Laravel Boost 超入門
fire_arlo
3
220
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.4k
Namespace and Its Future
tagomoris
6
700
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
It's Worth the Effort
3n
187
28k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Unsuck your backbone
ammeep
671
58k
Docker and Python
trallard
45
3.6k
How to Ace a Technical Interview
jacobian
279
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Orchestrator
shlominoach
190
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Faster Mobile Websites
deanohume
309
31k
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