Visual Intro to Custom React Hooks

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

Transcript

1. Custom React Hooks! by Melody, 1x engineer ✨ Reactadelphia July 2019
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