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
420
「学び」を捉えてマインドアップデート
1coin
0
310
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
96
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
190
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
26k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
410
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
860
私の仕事観 + 今の仕事
1coin
0
70
G空間APIと地図ライブラリの紹介
1coin
2
630
Other Decks in Technology
See All in Technology
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
170
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
420
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
590
20250719_JAWS_kobe
takuyay0ne
1
160
Wasmで社内ツールを作って配布しよう
askua
0
130
MCPと認可まわりの話 / mcp_and_authorization
convto
1
150
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
340
An introduction to Claude Code SDK
choplin
3
3.3k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.8k
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Raft: Consensus for Rubyists
vanstee
140
7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Pragmatic Product Professional
lauravandoore
35
6.8k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Six Lessons from altMBA
skipperchong
28
3.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Making Projects Easy
brettharned
116
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
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