Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Hooks を安全に使う
kobayang
May 27, 2019
Technology
2
990
React Hooks を安全に使う
kobayang
May 27, 2019
Tweet
Share
More Decks by kobayang
See All by kobayang
Apollo Client Cache
kobayang
0
630
Puppeteerを導入してみた話
kobayang
2
81k
ゼロから学ぶWeb Authentication API
kobayang
0
810
react-beautiful-dnd を使いたかった話
kobayang
2
1.4k
Other Decks in Technology
See All in Technology
DeepDive into Modern Development with AWS
mokocm
1
340
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
420
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
snoozer05
28
8.7k
Oracle Cloud Infrastructure:2022年7月度サービス・アップデート
oracle4engineer
PRO
0
180
ECS on EC2 で Auto Scaling やってみる!
sayjoy
1
220
ロボットの実行すらメンドクサイ!?
kou12092
0
190
聊聊 Cgo 的二三事
david74chou
0
330
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
pohsien
0
120
Trusted Web プロトタイプ
finengine
0
330
SBOMを利用したソフトウェアサプライチェーンの保護
masahiro331
1
190
Microsoft Data Analytics trends : ”Lakehouse” , ”Data Mesh"
ryomaru0825
2
130
Featured
See All Featured
A better future with KSS
kneath
226
16k
Product Roadmaps are Hard
iamctodd
35
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Unsuck your backbone
ammeep
659
55k
It's Worth the Effort
3n
172
26k
How GitHub (no longer) Works
holman
297
140k
What the flash - Photography Introduction
edds
62
10k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Statistics for Hackers
jakevdp
782
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Navigating Team Friction
lara
175
11k
Transcript
©2018 Wantedly, Inc. React HooksΛ҆શʹ͏ React.js meetup #7 25.Jan.2019 -
Naoki Kobayashi
©2018 Wantedly, Inc. Naoki Kobayashi GitHub: @kobayang Twitter: @kbys_02 I’m
an Engineer @Wantedly
©2018 Wantedly, Inc. ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ
©2018 Wantedly, Inc. Agenda - Hooks ΛదʹϝϞԽ͢Δ - react-hooks/exhaustive-deps Λઃఆ͢Δ
- stop-runaway-react-effects ͰϧʔϓΛࢹ͢Δ
©2018 Wantedly, Inc. HooksΛదʹϝϞԽ͢Δ
©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 }; }
©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ؔඳը͝ͱʹੜ͞Εͯ͠·͏
©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ͰؔΛϝϞԽ͢Δ
©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> ); };
©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 ͷࢀর͕ݹ͍
©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 ΛୈೋҾʹՃ͢Δ
©2018 Wantedly, Inc. e.g. Hooks ΛదʹϝϞԽ͢Δ - useCallbackΛ༻͠ඳը͝ͱͷؔͷੜΛ͙ - useCallbackͷୈೋҾΛదʹઃఆ͢Δ
- useMemo Ͱಉ༷ Ͳ͏ͬͯ֬ೝ͢Δʁ
©2018 Wantedly, Inc. react-hooks/exhaustive-deps
©2018 Wantedly, Inc. react-hooks/exhaustive-deps ઃఆͯ͠·͔͢ʁ - eslintͷreact-hooksͷrule - ඳը͝ͱʹ͕ؔมߋ͞ΕΔ߹ -
HooksͰࢀর͞ΕΔมΛୈೋҾʹઃఆ͍ͯ͠ͳ͍߹
©2018 Wantedly, Inc. react-hooks/exhaustive-deps ઃఆͯ͠·͔͢ʁ ReactͷެࣜυΩϡϝϯτͰઃఆ͢Δ͜ͱΛ͓קΊ͍ͯ͠Δ IUUQTSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNMVTFF⒎FDU
©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 }, []);
©2018 Wantedly, Inc. stop-runaway-react-effects
©2018 Wantedly, Inc. exhaustive-deps ͰνΣοΫͰ͖ͳ͍έʔε const handleResize = debounce(resize, 16);
useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [handleResize]); →ؒతʹ͕ؔมԽ͢Δ߹
©2018 Wantedly, Inc. stop-runaway-react-effects
©2018 Wantedly, Inc. stop-runaway-react-effects - Ͳͷ effect callback Ͱ ϧʔϓ͕ى͖͍ͯΔ͔
- ͲͷҾ͕มԽ͍ͯ͠Δ͔
©2018 Wantedly, Inc. ·ͱΊ - దʹϝϞԽΛߦ͍ແݶϧʔϓΛආ͚Δ - react-hooks/exhaustive-deps Λઃఆ͢Δ -
stop-runaway-react-effects ͰϧʔϓΛࢹ͢Δ