Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What the Hook ?

What the Hook ?

React Hooks presentation

Adnan A M

July 09, 2020
Tweet

More Decks by Adnan A M

Other Decks in Programming

Transcript

  1. C as C mp ne ts 4 c c 4

    s (p ) 4 b m (O s a f n ) A 2 3
  2. 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
  3. H w oe t at el ? 4 N e

    o a c c & s (p ) 4 N 't ' A 2 8
  4. 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
  5. 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
  6. u eS at S c o import { useState }

    from 'react'; const [encounter, setEncounter] = useState({ id: uuidv4(), period: { start: moment().valueOf() }, recordings: [], }); A 2 1
  7. 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
  8. u eE e t import { useEffect } from 'react';

    useEffect(() => { start(); }); A 2 1
  9. 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
  10. u eE e t - c ea up useEffect(() =>

    { EventListener.subscribe(); return function cleanup() { EventListener.unsubscribe(); } }); A 2 1
  11. u eE e t - O ti is d I

    P a import { useEffect } from 'react'; useEffect(() => { start(); }, [props.someElement]); A 2 1
  12. 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
  13. 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
  14. R le f r oo s import { useEffect }

    from 'react'; useEffect(() => { if (props.micAuthorized) { start(); } }, [props.micAuthorized]); A 2 1
  15. 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
  16. 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
  17. 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