React Hooks を安全に使う

Transcript

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

   Naoki Kobayashi

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

   an Engineer @Wantedly

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

4. ©2018 Wantedly, Inc. Agenda - Hooks Λద੾ʹϝϞԽ͢Δ - react-hooks/exhaustive-deps Λઃఆ͢Δ

   - stop-runaway-react-effects ͰϧʔϓΛ؂ࢹ͢Δ

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

6. ©2018 Wantedly, Inc. e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks export const useRect

   = () => { const [rect, setRect] = useState<ClientRect | DOMRect>(); const ref = useRef<HTMLDivElement | null>(null); const resize = () => { const target = ref.current; if (target) { const rect = target.getBoundingClientRect(); setRect(rect); } }; useEffect(() => resize(), [resize]); return { ref, rect }; }

7. ©2018 Wantedly, Inc. e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks export const useRect

   = () => { const [rect, setRect] = useState<ClientRect | DOMRect>(); const ref = useRef<HTMLDivElement | null>(null); const resize = () => { const target = ref.current; if (target) { const rect = target.getBoundingClientRect(); setRect(rect); } }; useEffect(() => resize(), [resize]); return { ref, rect }; } resizeؔ਺͸ඳը͝ͱʹੜ੒͞Εͯ͠·͏

8. ©2018 Wantedly, Inc. e.g. useRect: divͷେ͖͞Λऔಘ͢ΔCustom Hooks export const useRect

   = () => { const [rect, setRect] = useState<ClientRect | DOMRect>(); const ref = useRef<HTMLDivElement | null>(null); const resize = useCallback(() => { const target = ref.current; if (target) { const rect = target.getBoundingClientRect(); setRect(rect); } }, []); useEffect(() => resize(), [resize]); return { ref, rect }; } useCallbackͰؔ਺ΛϝϞԽ͢Δ

9. ©2018 Wantedly, Inc. e.g. counter const App: React.FC = ()

   => { const [count, setCount] = useState(0); const addCount = useCallback(() => { setCount(count + 1); }, []); return ( <div> <button onClick={() => addCount()}>Add Count</button> <p>count: {count}</p> </div> ); };

10. ©2018 Wantedly, Inc. e.g. counter const App: React.FC = ()

    => { const [count, setCount] = useState(0); const addCount = useCallback(() => { setCount(count + 1); }, []); return ( <div> <button onClick={() => addCount()}>Add Count</button> <p>count: {count}</p> </div> ); }; count ͷࢀর͕ݹ͍

11. ©2018 Wantedly, Inc. e.g. counter const App: React.FC = ()

    => { const [count, setCount] = useState(0); const addCount = useCallback(() => { setCount(count + 1); }, [count]); return ( <div> <button onClick={() => addCount()}>Add Count</button> <p>count: {count}</p> </div> ); }; count ΛୈೋҾ਺ʹ௥Ճ͢Δ

12. ©2018 Wantedly, Inc. e.g. Hooks Λద੾ʹϝϞԽ͢Δ - useCallbackΛ࢖༻͠ඳը͝ͱͷؔ਺ͷੜ੒Λ๷͙ - useCallbackͷୈೋҾ਺Λద੾ʹઃఆ͢Δ

    - useMemo Ͱ΋ಉ༷ Ͳ͏΍ͬͯ֬ೝ͢Δʁ

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

14. ©2018 Wantedly, Inc. react-hooks/exhaustive-deps ઃఆͯ͠·͔͢ʁ - eslintͷreact-hooksͷrule - ඳը͝ͱʹؔ਺͕มߋ͞ΕΔ৔߹ -

    Hooks಺Ͱࢀর͞ΕΔม਺ΛୈೋҾ਺ʹઃఆ͍ͯ͠ͳ͍৔߹

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

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 }, []);

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

18. ©2018 Wantedly, Inc. exhaustive-deps Ͱ͸νΣοΫͰ͖ͳ͍έʔε const handleResize = debounce(resize, 16);

    useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [handleResize]); →ؒ઀తʹؔ਺͕มԽ͢Δ৔߹

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

20. ©2018 Wantedly, Inc. stop-runaway-react-effects - Ͳͷ effect callback Ͱ
 ϧʔϓ͕ى͖͍ͯΔ͔

    - ͲͷҾ਺͕มԽ͍ͯ͠Δ͔

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

    stop-runaway-react-effects ͰϧʔϓΛ؂ࢹ͢Δ