React Hooks を安全に使う

Transcript

1. ©2018 Wantedly, Inc.
   React HooksΛ҆શʹ࢖͏
   React.js meetup #7
   25.Jan.2019 - Naoki Kobayashi
   

   View Slide

2. ©2018 Wantedly, Inc.
   Naoki Kobayashi
   GitHub: @kobayang
   Twitter: @kbys_02
   I’m an Engineer @Wantedly
   

   View Slide

3. ©2018 Wantedly, Inc.
   ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ
   

   View Slide

4. ©2018 Wantedly, Inc.
   Agenda
   - Hooks Λద੾ʹϝϞԽ͢Δ
   - react-hooks/exhaustive-deps Λઃఆ͢Δ
   - stop-runaway-react-effects ͰϧʔϓΛ؂ࢹ͢Δ
   

   View Slide

5. ©2018 Wantedly, Inc.
   HooksΛద੾ʹϝϞԽ͢Δ
   

   View Slide

6. ©2018 Wantedly, Inc.
   e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks
   export const useRect = () => {
   const [rect, setRect] = useState();
   const ref = useRef(null);
   const resize = () => {
   const target = ref.current;
   if (target) {
   const rect = target.getBoundingClientRect();
   setRect(rect);
   }
   };
   useEffect(() => resize(), [resize]);
   return { ref, rect };
   }
   

   View Slide

7. ©2018 Wantedly, Inc.
   e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks
   export const useRect = () => {
   const [rect, setRect] = useState();
   const ref = useRef(null);
   const resize = () => {
   const target = ref.current;
   if (target) {
   const rect = target.getBoundingClientRect();
   setRect(rect);
   }
   };
   useEffect(() => resize(), [resize]);
   return { ref, rect };
   }
   resizeؔ਺͸ඳը͝ͱʹੜ੒͞Εͯ͠·͏
   

   View Slide

8. ©2018 Wantedly, Inc.
   e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks
   export const useRect = () => {
   const [rect, setRect] = useState();
   const ref = useRef(null);
   const resize = useCallback(() => {
   const target = ref.current;
   if (target) {
   const rect = target.getBoundingClientRect();
   setRect(rect);
   }
   }, []);
   useEffect(() => resize(), [resize]);
   return { ref, rect };
   }
   useCallbackͰؔ਺ΛϝϞԽ͢Δ
   

   View Slide

9. ©2018 Wantedly, Inc.
   e.g. counter
   const App: React.FC = () => {
   const [count, setCount] = useState(0);
   const addCount = useCallback(() => {
   setCount(count + 1);
   }, []);
   return (
   
   addCount()}>Add Count
   count: {count}
   
   );
   };
   

   View Slide

10. ©2018 Wantedly, Inc.
    e.g. counter
    const App: React.FC = () => {
    const [count, setCount] = useState(0);
    const addCount = useCallback(() => {
    setCount(count + 1);
    }, []);
    return (
    
    addCount()}>Add Count
    count: {count}
    
    );
    };
    count ͷࢀর͕ݹ͍
    

    View Slide

11. ©2018 Wantedly, Inc.
    e.g. counter
    const App: React.FC = () => {
    const [count, setCount] = useState(0);
    const addCount = useCallback(() => {
    setCount(count + 1);
    }, [count]);
    return (
    
    addCount()}>Add Count
    count: {count}
    
    );
    };
    count ΛୈೋҾ਺ʹ௥Ճ͢Δ
    

    View Slide

12. ©2018 Wantedly, Inc.
    e.g. Hooks Λద੾ʹϝϞԽ͢Δ
    - useCallbackΛ࢖༻͠ඳը͝ͱͷؔ਺ͷੜ੒Λ๷͙
    - useCallbackͷୈೋҾ਺Λద੾ʹઃఆ͢Δ
    - useMemo Ͱ΋ಉ༷
    Ͳ͏΍ͬͯ֬ೝ͢Δʁ
    

    View Slide

13. ©2018 Wantedly, Inc.
    react-hooks/exhaustive-deps
    

    View Slide

14. ©2018 Wantedly, Inc.
    react-hooks/exhaustive-deps ઃఆͯ͠·͔͢ʁ
    - eslintͷreact-hooksͷrule
    - ඳը͝ͱʹؔ਺͕มߋ͞ΕΔ৔߹
    - Hooks಺Ͱࢀর͞ΕΔม਺ΛୈೋҾ਺ʹઃఆ͍ͯ͠ͳ͍৔߹
    

    View Slide

15. ©2018 Wantedly, Inc.
    react-hooks/exhaustive-deps ઃఆͯ͠·͔͢ʁ
    ReactͷެࣜυΩϡϝϯτͰ΋ઃఆ͢Δ͜ͱΛ͓קΊ͍ͯ͠Δ
    IUUQTSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNMVTFF⒎FDU
    

    View Slide

16. ©2018 Wantedly, Inc.
    disableʹ͢Δ৔߹͸ඞͣཧ༝Λॻ͘
    useEffect(() => {
    // apolloClient ͸ඳը͝ͱʹੜ੒͞ΕͯΔͨΊઃఆ͠ͳ͍
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [paramId]);
    useEffect(() => {
    // mount࣌ʹҰ౓͚࣮ͩߦ͍ͨ͠ͷͰ deps Λۭʹ͍ͯ͠·͢ɻ
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    

    View Slide

17. ©2018 Wantedly, Inc.
    stop-runaway-react-effects
    

    View Slide

18. ©2018 Wantedly, Inc.
    exhaustive-deps Ͱ͸νΣοΫͰ͖ͳ͍έʔε
    const handleResize = debounce(resize, 16);
    useEffect(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => {
    window.removeEventListener("resize", handleResize);
    };
    }, [handleResize]);
    →ؒ઀తʹؔ਺͕มԽ͢Δ৔߹
    

    View Slide

19. ©2018 Wantedly, Inc.
    stop-runaway-react-effects
    

    View Slide

20. ©2018 Wantedly, Inc.
    stop-runaway-react-effects
    - Ͳͷ effect callback Ͱ

    ϧʔϓ͕ى͖͍ͯΔ͔
    - ͲͷҾ਺͕มԽ͍ͯ͠Δ͔
    

    View Slide

21. ©2018 Wantedly, Inc.
    ·ͱΊ
    - ద੾ʹϝϞԽΛߦ͍ແݶϧʔϓΛආ͚Δ
    - react-hooks/exhaustive-deps Λઃఆ͢Δ
    - stop-runaway-react-effects ͰϧʔϓΛ؂ࢹ͢Δ
    

    View Slide