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
React Hooks 勉強会 vol.3
Search
circled9
June 04, 2020
Programming
2
440
React Hooks 勉強会 vol.3
社内勉強会の資料です。
https://water-cell.connpass.com/event/178300/
circled9
June 04, 2020
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
72
CloudflareのAI関連の機能さわってみた
circled9
0
580
0.0.0.0 day
circled9
0
100
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
220
🔥 Hono v4 やってみた
circled9
1
190
JetBrains AI Assistant を試してみた
circled9
1
520
Fresh
circled9
0
240
JSON.stringify()
circled9
2
490
Other Decks in Programming
See All in Programming
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
190
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
170
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
130
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
360
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
870
カクヨムAndroidアプリのリブート
numeroanddev
0
390
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
730
単体テストの始め方/作り方
toms74209200
0
390
「兵法」から見る質とスピード
ickx
0
250
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
150
Using AI Tools Around Software Development
inouehi
0
1.1k
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
100
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
470
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
52
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Typedesign – Prime Four
hannesfritz
42
2.7k
Rails Girls Zürich Keynote
gr2m
94
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How STYLIGHT went responsive
nonsquared
100
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
@circled9, 2020-06-04 React Hooks ษڧձ #3 WaterCell Inc. 1
ࣗݾհ দҪ ਖ਼ࢤ ( Matsui Masashi ) ϑϩϯτΤϯυΤϯδχΞ circled9 useStateࡉ͔͚͘Δ
2
Agenda • useRef • useImperativeHandle • useLayoutEffect • useDebugValue 3
αϯϓϧʹ͍ͭͯ • εϥΠυͷ࠷ޙʹGithubͱJSFiddleͷϦϯΫ͕͋Γ·͢ 4
useRef 5
Ref 6
Ref • propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආϋον • એݴతʹߦ͑ͳ͍ͷʹରͯ͠͏ • ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉͷࢀরΛ࣋ͭ 7
Ref • String Ref • Callback Ref • React.createRef() •
useRef 8
String Ref • refଐੑʹจࣈྻΛઃఆ͢Δ • this.refs.foo ͰཁૉʹΞΫηε͢Δ • ϨΨγʔͳAPIͳͷͰ͍͔ͭআ͞ΕΔ͔ 9
Callback Ref • refଐੑʹؔΛॻ͍ͯɺthis.fooͳͲʹཁૉΛઃఆ͢Δ 10
React.createRef() • 16.3͔Β͑Δػೳ • createRef()ͰrefΦϒδΣΫτΛ࡞͢Δ • refଐੑͰrefΦϒδΣΫτΛࢦఆ͢Δ • ཁૉͷΞΫηεfoo.currentͰߦ͏ 11
useRef 12
useRef • .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢ • refͷத͕มΘͬͯ࠶Ϩϯμʔൃੜ͠ͳ͍ • ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉҎ֎ʹରͯ͑͠Δ • ؔίϯϙʔωϯτͷதͰ͑Δ 13
useImperativeHandle 14
forwardRef 15
forwardRef • ࢠίϯϙʔωϯτʹrefΛͭ͢ • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ͍Ͳ͜Ζ͕͋Δ͔ 16
useImperativeHandle 17
useImperativeHandle • forwardRefͱΈ߹Θͤͯ͏ • ֎͔Βதͷrefʹରͯ͠ͷ࣮ΛݺͤΔ 18
useLayoutEffect 19
useLayoutEffect • useEffectʹΑ͘ࣅͯΔͭ • ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ • useEffectඇಉظͰॲཧ͞ΕΔ • ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊuseEffectΛ͏͖ 20
useDebugValue 21
useDebugValue • ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ • ҾͰͨ͠ΛReact DevTools্Ͱ֬ೝͰ͖Δ • ୈ2Ҿʹදࣔ༻ͷؔΛͤΔ • ϑΥʔϚοτͷॲཧίετ͕ߴ͍߹ʹ͏
22
Examples 23
Github • react-hooks-example • https://github.com/circled9/react-hooks-example 24
JSFiddle • String Ref • https://jsfiddle.net/circled9/gx7ak3cu/ • Callback Ref •
https://jsfiddle.net/circled9/m8xk5sr0/ • createRef • https://jsfiddle.net/circled9/fvgre0su/ 25
JSFiddle • useRef • https://jsfiddle.net/circled9/1m8j2Lvd/ • useRef (vs state) •
https://jsfiddle.net/circled9/dqxj2vsb/ • useImperativeHandle • https://jsfiddle.net/circled9/vxtja8m5/ 26