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
270
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
76
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
160
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
23k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
380
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
800
私の仕事観 + 今の仕事
1coin
0
56
G空間APIと地図ライブラリの紹介
1coin
2
590
Googleアシスタントについて
1coin
0
370
Other Decks in Technology
See All in Technology
re:Invent 2024のふりかえり
beli68
0
110
ABWGのRe:Cap!
hm5ug
1
120
DMMブックスへのTipKit導入
ttyi2
1
110
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!事例のご紹介+座学②
siyuanzh09
0
110
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
2.1k
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
12
2.2k
ゼロからわかる!!AWSの構成図を書いてみようワークショップ 問題&解答解説 #デッカイギ #羽田デッカイギおつ
_mossann_t
0
1.5k
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
170
When Windows Meets Kubernetes…
pichuang
0
300
KMP with Crashlytics
sansantech
PRO
0
240
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
500
JuliaTokaiとJuliaLangJaの紹介 for NGK2025S
antimon2
1
120
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
66
11k
We Have a Design System, Now What?
morganepeng
51
7.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Bash Introduction
62gerente
610
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Being A Developer After 40
akosma
89
590k
A better future with KSS
kneath
238
17k
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