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 hookのデバッグとその対策
Search
1coin
January 25, 2021
Technology
4
1.1k
複雑化したReact hookのデバッグとその対策
React Night #1 - connpass
https://misokatsu-web.connpass.com/event/196285/
1coin
January 25, 2021
Tweet
Share
More Decks by 1coin
See All by 1coin
「学び」を捉えてマインドアップデート
1coin
0
260
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
75
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
160
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
23k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
380
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
790
私の仕事観 + 今の仕事
1coin
0
55
G空間APIと地図ライブラリの紹介
1coin
2
570
Googleアシスタントについて
1coin
0
370
Other Decks in Technology
See All in Technology
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
530
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
生成AIのガバナンスの全体像と現実解
fnifni
1
180
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
150
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
2
2.2k
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
Featured
See All Featured
Visualization
eitanlees
146
15k
Building Your Own Lightsaber
phodgson
103
6.1k
How GitHub (no longer) Works
holman
311
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Docker and Python
trallard
42
3.1k
Become a Pro
speakerdeck
PRO
26
5k
The Invisible Side of Design
smashingmag
298
50k
Code Review Best Practice
trishagee
65
17k
Facilitating Awesome Meetings
lara
50
6.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Site-Speed That Sticks
csswizardry
2
190
Transcript
ෳࡶԽͨ͠React hookͷσόοάͱ ͦͷରࡦ @1coin178 2021/01/25 React Night #1 1
ࣗݾհ • Ұԁ ਅ࣏ @1coin178 • Ϡϑʔ໊ݹΦϑΟεͰΤϯδχΞ • ReactͬͯWebਤ࡞ͬͯ·͢ •
ϚΠϒʔϜ • ۙॴͷમ౬ɾன෩࿊@ࣗ 2
͍ͭͷࣄ https://map.yahoo.co.jp React + Redux + MapboxGLJS 3
ϦχϡʔΞϧ࣌ͷۤ • ϦϦʔεલʹΫϥείϯϙʔωϯτ͔Β ؔίϯϙʔωϯτ + Hookʹશॻ͖͑Λߦͬͨ • ॻ͖͑ͷཧ༝ɺcomponentDidUpdateͷ݅ذ͕ෳࡶԽͯ͠ ͍ͨΊɻHookͷuseEffectͰॲཧΛ͠ରࡦΛߦͬͨɻ •
಄Λ·ͤͨͷ͕ɺHookͷґଘྻͷཧɻಛʹuseEffect׳Ε ͕ඞཁͰɺແݶϧʔϓ͕ൃੜ͢ΔͳͲ͕ଟ͔ͬͨɻ • ࣌ɺσόοάํ๏ใΛݟ͚ͭΒΕͣۤ࿑ͨ͠ 4
ࠓ͢͜ͱ React Hookͷσόοάʹཱͬͨπʔϧͱରࡦํ๏Λհ ΞδΣϯμ 1. HookͷґଘྻΛ͓͞Β͍ 2. σόοάʹศརͳϥΠϒϥϦհ 3. ෳࡶԽͨ͠Hookͷରࡦ
5
HookͷґଘྻΛ͓͞Β͍ 6
HookͷґଘྻΛ͓͞Β͍ • ґଘྻ = Hookͷୈ2Ҿͷྻ • Hookͷൃಈʹ݅Λ͚ͭΔ͜ͱ͕Ͱ͖Δɻਖ਼͘͠ઃఆ͠ͳ͍ͱಈ͔ͳ͍ɾಈ͍ͯ͠·͏ const [count, setCount]
= useState(0) // mount࣌ͷΈ࣮ߦ useEffect(() => { console.log("Mount:" + count) },[]) // []݅ͳ͠); // mount + count͕ߋ৽͞Εͨ࣌ʹ࣮ߦ useEffect(() => { console.log("Update:" + count) },[count]) // count͕มԽͨ࣌͠); 7
HookͷґଘྻΛ͓͞Β͍ • ෦ͰsetNumberͨ͠ΒͲ͏ͳΔͰ͠ΐ͏? • => countߋ৽ˠuseEffect→countߋ৽ˠuseEffect→... => ແݶϧʔϓ͕ൃੜ const [count,
setCount] = useState(0) // mount࣌ͷΈ࣮ߦ useEffect(() => { console.log("Mount:" + count) },[]) // []݅ͳ͠); // mount + count͕ߋ৽͞Εͨ࣌ʹ࣮ߦ useEffect(() => { console.log("Update:" + count) // Ճ setCount(count+ 1) },[count]) // ґଘྻ); 8
ެࣜਪͷLintઃఆ https://ja.reactjs.org/docs/hooks-reference.html#useeffect • eslint-plugin-react-hooksͷreact-hooks/exhaustive-deps • ґଘྻ͕ਖ਼͘͠ͳ͍߹ɺमਖ਼ΛఏҊͯ͘͠ΕΔ • ͔͠͠ɺै͑ඞͣظ௨ΓʹͳΔΘ͚Ͱͳ͍ɻ ૉʹमਖ਼ͨ͠Βແݶϧʔϓೖ͢Δ͜ͱ... 9
࣌Hookཧղ͕ϒϨΠΫεϧʔͨ͠ࢿྉ • useEffectશΨΠυ — Overreacted1 “֮͑ͨ͜ͱΛશͯΕΔͷ͡Ό.” -— Yoda 1 https://iqkui.com/ja/a-complete-guide-to-useeffect/
10
σόοάʹศརͳϥΠϒϥϦհ 11
σόοάʹศརͳϥΠϒϥϦ • simbathesailor/use-what-changed2 • ίϯιʔϧʹHookมԽΛग़ྗ • custom Hook/babel plugin •
kentcdodds/stop-runaway-react-effects3 • ແݶϧʔϓൃੜ࣌ɺΞϓϦΛఀࢭ͠ίϯιʔϧʹܯࠂΛग़ྗ 3 https://github.com/kentcdodds/stop-runaway-react-effects 2 https://github.com/simbathesailor/use-what-changed 12
use-what-changed :͍ํͱग़ྗ consoleʹґଘྻͷมԽঢ়گ͕ग़ྗ • ରͷhook/ϑΝΠϧͷ໊લ • ґଘྻͷ໊લ • มԽ͔ͨ͠Ͳ͏͔ (
✅ , ) • มԽલޙͷ • ॳճ࣮ߦ or ߋ৽ • hook͝ͱʹϢχʔΫͳ৭ 13
use-what-changed:Πϯετʔϧํ๏ɹ npm i @simbathesailor/use-what-changed --save-dev npm i @simbathesailor/babel-plugin-use-what-changed --save-dev 14
use-what-changed:Πϯετʔϧํ๏ɹ • bable.config.json { "presets": [ "react-app" ], "plugins": [
[ "@simbathesailor/babel-plugin-use-what-changed", { "active": true } ] ] } 15
use-what-changed:͍ํͱग़ྗ ࢹ͍ͨ͠Hook্෦ʹuwc-debugͱίϝϯτ͢Δ͚ͩ uwc-debug-belowͩͱҎ߱ͷHookͯ͢ΛରʹͰ͖Δ const [a, setA] = useState("React Night"); const
[b, setB] = useState(1); // uwc-debug useEffect(() => { // do something }, [a, b]); <button onClick={() => { setB((b) => b + 1); }} > 16
ෳࡶԽͨ͠Hookͷରࡦ 17
ͳͥෳࡶԽ͢Δͷ͔ • ϩδοΫ͕ίϯϙʔωϯτʹدΔͱ ؔએݴࢹ͢ΔState͕૿Ճ͠ɺ͕ංେԽ • ݁ՌɺStateมԽʹ͏෭࡞༻(useEffect)͕૿͑ɺͦΕͧΕͷ ͷѲ͕ࠔʹͳΓɺґଘྻΛ૿ͯ͠͠·͏ɻ • ·ͨɺϏδωεϩδοΫΛͲ͜ʹ࣮͢Δͷ͕͍͍ͷ͔? ίϯϙʔωϯτ֎ͳͷ͔ํ͕ඞཁɻ
18
HookංେԽͷରࡦ 1. react-hooks/exhaustive-depsLintwarnͰઃఆ͠ɺFix/disable͢Δ͔దٓஅɻ 2. ίϯϙʔωϯτ͔ΒϩδοΫΛ • UIʹґଘ͠ͳ͍ͷɺίϯϙʔωϯτ֎ʹ • ൚༻త →
ผϞδϡʔϧ / ίϯϙʔωϯτґଘ → ίϯϙʔωϯτ 3. ReduxͳΒɺre-ducks4ͷߟ͑ʹج͖ͮɺoperations/selectorsʹ 4. custom HookΛੵۃతʹ࡞ Fat → slimʹͳͬͨίϯϙʔωϯτׂͰΛཧ͍ͯ͘͠ 4 https://github.com/alexnm/re-ducks 19
Fin. ! ฉ͍ͯ͘Εͯ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 20
αϯϓϧίʔυ • https://github.com/1coin178/sample-use-what-changed-cra 21
ࢀߟࢿྉ • useEffectશΨΠυ — Overreacted1 • Debug your Reactjs Hooks
with ease !! | by Anil Chaudhary | Medium • ҆શʹ React Hooks Λ༻͢Δ - Qiita • ϑοΫʹؔ͢ΔΑ͋͘Δ࣭ – React 1 https://iqkui.com/ja/a-complete-guide-to-useeffect/ 22