複雑化したReact hookのデバッグとその対策

React Night #1 - connpass https://misokatsu-web.connpass.com/event/196285/

Transcript

1. ෳࡶԽͨ͠React hookͷσόοάͱ ͦͷରࡦ @1coin178 2021/01/25 React Night #1 1
2. ࣗݾ঺հ • Ұԁ ਅ࣏ @1coin178 • Ϡϑʔ໊ݹ԰ΦϑΟεͰΤϯδχΞ • React࢖ͬͯWeb஍ਤ࡞ͬͯ·͢ • ϚΠϒʔϜ • ۙॴͷમ౬ɾன෩࿊@ࣗ୐ 2
3. ͍ͭ΋ͷ࢓ࣄ https://map.yahoo.co.jp React + Redux + MapboxGLJS 3
4. ϦχϡʔΞϧ࣌ͷۤ೰ • ϦϦʔεલʹΫϥείϯϙʔωϯτ͔Β ؔ਺ίϯϙʔωϯτ + Hookʹશॻ͖׵͑Λߦͬͨ • ॻ͖׵͑ͷཧ༝͸ɺcomponentDidUpdateͷ৚݅෼ذ͕ෳࡶԽͯ͠ ͍ͨΊɻHookͷuseEffectͰॲཧΛ෼཭͠ରࡦΛߦͬͨɻ • ಄Λ೰·ͤͨͷ͕ɺHookͷґଘ഑ྻͷ؅ཧɻಛʹuseEffect͸׳Ε ͕ඞཁͰɺແݶϧʔϓ͕ൃੜ͢ΔͳͲ໰୊͕ଟ͔ͬͨɻ • ౰࣌ɺσόοάํ๏΋৘ใΛݟ͚ͭΒΕͣۤ࿑ͨ͠ 4
5. ࠓ೔࿩͢͜ͱ React Hookͷσόοάʹ໾ཱͬͨπʔϧͱରࡦํ๏Λ঺հ ΞδΣϯμ 1. Hookͷґଘ഑ྻΛ͓͞Β͍ 2. σόοάʹศརͳϥΠϒϥϦ঺հ 3. ෳࡶԽͨ͠Hook΁ͷରࡦ 5
6. Hookͷґଘ഑ྻΛ͓͞Β͍ 6
7. 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
8. 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
9. ެࣜਪ঑ͷLintઃఆ https://ja.reactjs.org/docs/hooks-reference.html#useeffect • eslint-plugin-react-hooksͷreact-hooks/exhaustive-deps • ґଘ഑ྻ͕ਖ਼͘͠ͳ͍৔߹ɺमਖ਼ΛఏҊͯ͘͠ΕΔ • ͔͠͠ɺै͑͹ඞͣظ଴௨ΓʹͳΔΘ͚Ͱ͸ͳ͍ɻ ૉ௚ʹमਖ਼ͨ͠Βແݶϧʔϓ౤ೖ͢Δ͜ͱ΋... 9
10. ౰࣌Hookཧղ͕ϒϨΠΫεϧʔͨ͠ࢿྉ • useEffect׬શΨΠυ — Overreacted1 “֮͑ͨ͜ͱΛશͯ๨ΕΔͷ͡Ό.” -— Yoda 1 https://iqkui.com/ja/a-complete-guide-to-useeffect/ 10
11. σόοάʹศརͳϥΠϒϥϦ঺հ 11
12. σόοάʹศརͳϥΠϒϥϦ • 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
13. use-what-changed :࢖͍ํͱग़ྗ consoleʹґଘ഑ྻͷมԽঢ়گ͕ग़ྗ • ର৅ͷhook/ϑΝΠϧͷ໊લ • ґଘ഑ྻͷ໊લ • มԽ͔ͨ͠Ͳ͏͔ ( ✅ , ) • มԽલޙͷ஋ • ॳճ࣮ߦ or ߋ৽ • hook͝ͱʹϢχʔΫͳ৭ 13
14. use-what-changed:Πϯετʔϧํ๏ɹ npm i @simbathesailor/use-what-changed --save-dev npm i @simbathesailor/babel-plugin-use-what-changed --save-dev 14
15. use-what-changed:Πϯετʔϧํ๏ɹ • bable.config.json { "presets": [ "react-app" ], "plugins": [ [ "@simbathesailor/babel-plugin-use-what-changed", { "active": true } ] ] } 15
16. 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
17. ෳࡶԽͨ͠Hook΁ͷରࡦ 17
18. ͳͥෳࡶԽ͢Δͷ͔ • ϩδοΫ͕ίϯϙʔωϯτʹدΔͱ ؔ਺એݴ΍؂ࢹ͢ΔState͕૿Ճ͠ɺ੹຿͕ංେԽ • ݁ՌɺStateมԽʹ൐͏෭࡞༻(useEffect)͕૿͑ɺͦΕͧΕͷ੹຿ ͷ೺Ѳ͕ࠔ೉ʹͳΓɺґଘ഑ྻΛ૿΍ͯ͠͠·͏ɻ • ·ͨɺϏδωεϩδοΫΛͲ͜ʹ࣮૷͢Δͷ͕͍͍ͷ͔? ίϯϙʔωϯτ಺֎ͳͷ͔ํ਑͕ඞཁɻ 18
19. HookංେԽ΁ͷରࡦ 1. react-hooks/exhaustive-depsLint͸warnͰઃఆ͠ɺFix/disable͢Δ͔͸దٓ൑அɻ 2. ίϯϙʔωϯτ͔ΒϩδοΫΛ෼཭ • UIʹґଘ͠ͳ͍΋ͷ͸ɺίϯϙʔωϯτ֎ʹ • ൚༻త → ผϞδϡʔϧ / ίϯϙʔωϯτґଘ → ίϯϙʔωϯτ಺ 3. ReduxͳΒ͹ɺre-ducks4ͷߟ͑ʹج͖ͮɺoperations/selectorsʹ෼཭ 4. custom HookΛੵۃతʹ࡞੒ Fat → slimʹͳͬͨίϯϙʔωϯτ෼ׂͰ੹຿Λ੔ཧ͍ͯ͘͠ 4 https://github.com/alexnm/re-ducks 19
20. Fin. ! ฉ͍ͯ͘Εͯ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 20
21. αϯϓϧίʔυ • https://github.com/1coin178/sample-use-what-changed-cra 21
22. ࢀߟࢿྉ • 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