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

Visual Intro to Custom React Hooks

Visual Intro to Custom React Hooks

Lightning talk @ Reactadelphia July 2019! melody.dev/custom-hooks

Inky Collective

July 16, 2019
Tweet

More Decks by Inky Collective

Other Decks in Technology

Transcript

  1. Custom React Hooks!
    by Melody, 1x engineer ✨
    Reactadelphia July 2019

    View full-size slide

  2. hey hi, i’m melody!
    they/them
    {
    ,
    ,
    ,
    }

    View full-size slide

  3. Let’s talk hooks.
    “They let you use state and other React
    features without writing a class.”
    —Dan Abramov

    View full-size slide

  4. Say you have a blog:

    View full-size slide

  5. Where can custom hooks be used?
    “where is
    stateful logic
    involved?”
    “can this
    logic be
    reused?”

    View full-size slide

  6. Where can custom hooks be used?



    View full-size slide

  7. Where can custom hooks be used?
    history user preferences

    View full-size slide

  8. Let’s make a hook!
    psst… they’re just functions!
    • it has to start with `use`
    • you can use other hooks in them
    • notably, useState() and

    other custom hooks!

    View full-size slide

  9. Hooks in action:
    useHistory()


    View full-size slide

  10. Hooks on the net!
    usehooks.com

    View full-size slide

  11. useDarkMode()
    usehooks.com/useDarkMode

    View full-size slide

  12. Hooks in action:
    useHistory()


    useDarkMode()


    View full-size slide

  13. Hooks in action:
    useHistory()


    useDarkMode()


    View full-size slide

  14. useYourImagination()
    Here are some helpful resources:
    • https://reactjs.org/docs/hooks-custom.html
    • https://usehooks.com

    View full-size slide

  15. useThankYou()
    @pixelyunicorn @melody
    melody.dev/custom-hooks
    patreon.com/madebymelody
    SW-4207-5422-1528

    View full-size slide