Custom React Hooks!
by Melody, 1x engineer ✨
Reactadelphia July 2019
Slide 2
Slide 2 text
hey hi, i’m melody!
they/them
{
,
,
,
}
Slide 3
Slide 3 text
melody.dev
Slide 4
Slide 4 text
Let’s talk hooks.
“They let you use state and other React
features without writing a class.”
—Dan Abramov
Slide 5
Slide 5 text
Say you have a blog:
Slide 6
Slide 6 text
Where can custom hooks be used?
“where is
stateful logic
involved?”
“can this
logic be
reused?”
Slide 7
Slide 7 text
Where can custom hooks be used?
Slide 8
Slide 8 text
Where can custom hooks be used?
history user preferences
Slide 9
Slide 9 text
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!
Slide 10
Slide 10 text
Hooks in action:
useHistory()
Slide 11
Slide 11 text
Hooks on the net!
usehooks.com
Slide 12
Slide 12 text
useDarkMode()
usehooks.com/useDarkMode
Slide 13
Slide 13 text
Hooks in action:
useHistory()
useDarkMode()
Slide 14
Slide 14 text
Hooks in action:
useHistory()
useDarkMode()
Slide 15
Slide 15 text
useYourImagination()
Here are some helpful resources:
• https://reactjs.org/docs/hooks-custom.html
• https://usehooks.com