Visual Intro to Custom React 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