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

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