What the Hook ?

React Hooks presentation

Transcript

1. W at he oo ? A 2 1
2. B ck ro nd A 2 2
3. C as C mp ne ts 4 c c 4 s (p ) 4 b m (O s a f n ) A 2 3
4. W at's ro g ? 4 L c l l 4 D t m e l l m 4 I m c o 4 S o l (H /r p a.k.a W l !) A 2 4
5. E te H ok ! A 2 5
6. W at s H ok ? A 2 6
7. P ai o d un ti n A 2 7
8. H w oe t at el ? 4 N e o a c c & s (p ) 4 N 't ' A 2 8
9. W at bo t ta e & l fe yc e ? import { useState } from 'react'; import { useEffect } from 'react'; import { useYourImagination } from 'yourImagination'; A 2 9
10. u eS at F h s p import { useState } from 'react'; const [isLoading, setLoading] = useState(false); const [duration, setDuration] = useState(0); <p>You ran for {duration} minutes</p> <button onClick={() => setDuration(duration + 1)}>Add 1 Min</button> A 2 1
11. u eS at S c o import { useState } from 'react'; const [encounter, setEncounter] = useState({ id: uuidv4(), period: { start: moment().valueOf() }, recordings: [], }); A 2 1
12. u eS at G import { useState } from 'react'; const [duration, setDuration] = useState(0); <button onClick={() => setDuration(duration + 1)}>Add 1 Min</button> R s s i M ! A 2 1
13. u eE e t import { useEffect } from 'react'; useEffect(() => { start(); }); A 2 1
14. u eE e t 4 R a e r i n h s 4 H a s & p i h c n 4 E r c a e i e h e e t e A 2 1
15. u eE e t - c ea up useEffect(() => { EventListener.subscribe(); return function cleanup() { EventListener.unsubscribe(); } }); A 2 1
16. u eE e t - O ti is d I P a import { useEffect } from 'react'; useEffect(() => { start(); }, [props.someElement]); A 2 1
17. R le f r oo s 4 O l o R F n 4 D 't l h i l , c o n f n A 2 1
18. D n t oo ! import { useEffect } from 'react'; // ! We're breaking the rule by using a Hook in conditions if (props.micAuthorized) { useEffect(function startOp() { start(); },[props.micAuthorized]); } A 2 1
19. R le f r oo s import { useEffect } from 'react'; useEffect(() => { if (props.micAuthorized) { start(); } }, [props.micAuthorized]); A 2 1
20. C st m oo s import { BackHandler } from 'react-native'; componentDidMount() { this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBackPress); } componentWillUnmount() { this.backHandler.remove(); } A 2 2
21. C st m oo s import { useEffect } from 'react'; import { BackHandler } from 'react-native'; function useBackButton(handler) { useEffect(() => { BackHandler.addEventListener('hardwareBackPress', handler); return () => { BackHandler.removeEventListener('hardwareBackPress',handler); }; }, [handler]); } useBackButton(handleAndroidBackPress); A 2 2
22. P rt ng ho gh s... ! 4 T a t s n n r a l l ☠ 4 T e e s n a u a e r " 4 S s c n r o e e y f n c n A 2 2
23. T an y u ! A 2 2