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
71
useImperativeHandle を迷いながら使った話
React Osaka 2024 10
kamiyam
October 04, 2024
Tweet
Share
More Decks by kamiyam
See All by kamiyam
sqlcを利用してsqlに型付けを
kamiyam
1
470
GraphQLで使うデータに TypeScriptで型を定義する
kamiyam
1
600
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Porting a visionOS App to Android XR
akkeylab
0
460
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
NPOでのDevinの活用
codeforeveryone
0
840
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
For a Future-Friendly Web
brad_frost
179
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Producing Creativity
orderedlist
PRO
346
40k
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