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
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Improving my own Ruby thereafter
sisshiki1969
1
160
testingを眺める
matumoto
1
140
Ruby Parser progress report 2025
yui_knk
1
460
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Reading Rails 1.0 Source Code
okuramasafumi
0
250
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How STYLIGHT went responsive
nonsquared
100
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Embracing the Ebb and Flow
colly
87
4.8k
A Tale of Four Properties
chriscoyier
160
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Building an army of robots
kneath
306
46k
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