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
useRefについて調べてみた
Search
Kazuki Shibata
September 04, 2019
Technology
1
160
useRefについて調べてみた
2019.09.04 React LT会の発表資料です。
https://informetis.connpass.com/event/142183/
Kazuki Shibata
September 04, 2019
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.1k
SvelteKitでJamstackを試す
shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
960
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
47
19k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Connect 100+を支える技術
kanyamaguc
0
200
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
550
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Faster Mobile Websites
deanohume
307
31k
Music & Morning Musume
bryan
46
6.6k
Become a Pro
speakerdeck
PRO
29
5.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Facilitating Awesome Meetings
lara
54
6.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Scaling GitHub
holman
460
140k
Transcript
useRefʹ͍ͭͯௐͯΈͨ @shibe97 2019.9.4 React LTձ
ࣲా ف ΥϯλגࣜձࣾͰmicroCMSͱ͍͏ϔουϨεCMSΛ ࡞͍ͬͯ·͢ɻ ීஈReact͍Ͱɺ࠷ۙVueͪΐͬͱ৮Γ·͢ɻ @shibe97
None
ೖྗϑΥʔϜͱAPIΛඵͰ࡞Ͱ͖ΔαʔϏε
React Hooksͱ • React 16.8͔ΒՃ͞Εͨػೳ • Functional ComponentʹClass Componentͱಉ༷ͷॲཧ͕ Ͱ͖ΔΑ͏ʹՃ͞Εͨ
• stateϥΠϑαΠΫϧ૬ͷͷ
useRefͱ • DOMͷࢀরʹ͑Δ • ࠶ඳըͤ͞ͳ͍มཧ͕Ͱ͖Δ
DOMͷࢀরʹ͑ΔʢެࣜྫΑΓʣ function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick
= () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); }
࠶ඳըͤ͞ͳ͍มཧ͕Ͱ͖Δ • refΦϒδΣΫτΛcurrentϓϩύςΟʹอ࣋͢Δ • ࠶ඳը࣌ɺຖճಉ͡refΦϒδΣΫτΛฦ͢ • currentʹೖͯ͠࠶ඳը͞Εͳ͍ { current: initialValue
}
useRefͷ࣮ function mountRef<T>(initialValue: T): {current: T} { const hook =
mountWorkInProgressHook(); const ref = {current: initialValue}; if (__DEV__) { Object.seal(ref); } hook.memoizedState = ref; return ref; } function updateRef<T>(initialValue: T): {current: T} { const hook = updateWorkInProgressHook(); return hook.memoizedState; } ϝϞϦ্ͷΛຖճฦ͚ͩ͢ ϝϞϦ্ͰΦϒδΣΫτΛอ࣋ currentϓϩύςΟʹΛอ࣋
͜ͷΈΛར༻Ͱ͖ΔྫͬͯͳΜͩΖ͏
DOMͩʂ
inputཁૉͷྫ: useState function TextInput() { const [ text, setText ]
= useState(‘’); const onChange = useCallback(e => { setText(e.target.value); }; return ( <input onChange={onChange} type="text" /> ); } ςΩετΛมߋ͢Δͨͼʹඳը͞ΕΔ
inputཁૉͷྫ: useRefʢcurrentࢦఆʣ function TextInput() { const { current } =
useRef(null); const onChange = useCallback(e => { current = e.target.value; }); return ( <input onChange={onChange} type="text" /> ); } ςΩετΛมߋͯ͠࠶ඳը͞Εͳ͍
͋ΕɺͰ͜Εͬͯɾɾɾ
inputཁૉͷྫ: useRefʢDOMࢀরʣ function TextInput() { const inputEl = useRef(null); return
( <input ref={inputEl} type="text" /> ); } ͪΖΜ͜ͷํ๏࠶ඳը͞Εͳ͍
·ͱΊ • useRefΛอ࣋Ͱ͖Δ্ʹɺมߋͯ͠࠶ඳը͞Εͳ͍ • inputཁૉʹuseStateΑΓuseRefͷํ͕ύϑΥʔϚϯεྑ͍ • ͪΖΜControlled Componentʹ͍ͨ͠߹useStateʹ͢Δ ඞཁ͋Γ
͓·͚
useRefΦϒδΣΫτΛࢀর͍ͯ͠Δ͔Β ෦ϓϩύςΟมߋͨ͠ͱ͜ΖͰ࠶ඳը͞Εͳ͍ΜͩΖ͏
Α͠ɺLTωλ͜ΕͰ͍͜͏ʂ
useRefͷ࣮ function mountRef<T>(initialValue: T): {current: T} { const hook =
mountWorkInProgressHook(); const ref = {current: initialValue}; if (__DEV__) { Object.seal(ref); } hook.memoizedState = ref; return ref; } function updateRef<T>(initialValue: T): {current: T} { const hook = updateWorkInProgressHook(); return hook.memoizedState; } ϝϞϦ্ͷΛຖճฦ͚ͩ͢ ϝϞϦ্ͰΦϒδΣΫτΛอ࣋ currentϓϩύςΟʹΛอ࣋
·ͬͨؔ͘ͳ͔ͬͨ
Thanks :) @shibe97