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


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

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

  3. melody.dev

  4. Let’s talk hooks. “They let you use state and other

    React features without writing a class.” —Dan Abramov
  5. Say you have a blog:

  6. Where can custom hooks be used? “where is stateful logic

    involved?” “can this logic be reused?”
  7. Where can custom hooks be used? <NavItem> <ReadIndicator> <ToggleTheme>

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

  9. 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!
  10. Hooks in action: useHistory() <NavItem> <ReadIndicator>

  11. Hooks on the net! usehooks.com

  12. useDarkMode() usehooks.com/useDarkMode

  13. Hooks in action: useHistory() <NavItem> <ReadIndicator> useDarkMode() <Application> <ToggleTheme>

  14. Hooks in action: useHistory() <NavItem> <ReadIndicator> useDarkMode() <Application> <ToggleTheme>

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

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