Visual Intro to Custom React Hooks

Transcript

1. 1.

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

   2019
2. 2.

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

3. 3.

   melody.dev

4. 4.

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

   React features without writing a class.” —Dan Abramov
5. 5.

   Say you have a blog:

6. 6.

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

   involved?” “can this logic be reused?”
7. 7.

   Where can custom hooks be used? <NavItem> <ReadIndicator> <ToggleTheme>

8. 8.

   Where can custom hooks be used? history user preferences

9. 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. 10.

    Hooks in action: useHistory() <NavItem> <ReadIndicator>

11. 11.

    Hooks on the net! usehooks.com

12. 12.

    useDarkMode() usehooks.com/useDarkMode

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

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