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
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
680
AIともっと楽するE2Eテスト
myohei
8
2.9k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
740
効率的な開発手段として VRTを活用する
ishkawa
0
160
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
380
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.9k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
700
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
PicoRuby on Rails
makicamel
2
140
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
290
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Speed Design
sergeychernyshev
32
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Thoughts on Productivity
jonyablonski
69
4.7k
A better future with KSS
kneath
238
17k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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