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
990
複雑化した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
240
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
70
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
130
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
21k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
360
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
760
私の仕事観 + 今の仕事
1coin
0
51
G空間APIと地図ライブラリの紹介
1coin
2
550
Googleアシスタントについて
1coin
0
350
Other Decks in Technology
See All in Technology
Tracking down sources of kernel errors with retsnoop
ennael
PRO
0
160
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
380
Databricks Appのご紹介
databricksjapan
0
140
【shownet.conf_】クロージングセッション
shownet
PRO
0
300
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
320
【shownet.conf_】革新と伝統を融合したファシリティ
shownet
PRO
0
330
Product Utilization of Large Language Models Starting Today
ymatsuwitter
3
1.3k
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
350
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
400
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
200
電子辞書にステータスバーを実装する
puhitaku
0
100
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
1.7k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Become a Pro
speakerdeck
PRO
24
4.9k
4 Signs Your Business is Dying
shpigford
180
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Designing the Hi-DPI Web
ddemaree
280
34k
Testing 201, or: Great Expectations
jmmastey
38
7k
Faster Mobile Websites
deanohume
304
30k
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