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
ichien178
January 25, 2021
Technology
4
1.2k
複雑化したReact hookのデバッグとその対策
React Night #1 - connpass
https://misokatsu-web.connpass.com/event/196285/
ichien178
January 25, 2021
Tweet
Share
More Decks by ichien178
See All by ichien178
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
390
「学び」を捉えてマインドアップデート
1coin
0
300
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
93
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
190
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
26k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
410
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
860
私の仕事観 + 今の仕事
1coin
0
69
G空間APIと地図ライブラリの紹介
1coin
2
630
Other Decks in Technology
See All in Technology
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
240
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
300
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
150
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
680
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.6k
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
150
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
0
200
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
370
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
380
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
260
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Six Lessons from altMBA
skipperchong
28
3.9k
Thoughts on Productivity
jonyablonski
69
4.7k
It's Worth the Effort
3n
185
28k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Raft: Consensus for Rubyists
vanstee
140
7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Gamification - CAS2011
davidbonilla
81
5.3k
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