Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Visual Intro to Custom React Hooks
Inky Collective
July 16, 2019
Technology
0
1.7k
Visual Intro to Custom React Hooks
Lightning talk @ Reactadelphia July 2019! melody.dev/custom-hooks
Inky Collective
July 16, 2019
Tweet
Share
More Decks by Inky Collective
See All by Inky Collective
pixely
3
1k
pixely
0
9
pixely
0
1.9k
pixely
0
1.1k
pixely
0
2.4k
pixely
0
64
pixely
0
39
pixely
1
28
pixely
0
71
Other Decks in Technology
See All in Technology
optim
0
190
grapecity_dev
0
130
miyakemito
1
550
whitefox_73
0
180
pg0084
1
130
iwashi86
53
23k
eayedi
1
120
chaspy
6
1.2k
kaedemalu
0
310
viva_tweet_x
1
380
andoshin11
0
140
mokocm
0
1.1k
Featured
See All Featured
denniskardys
220
120k
addyosmani
494
110k
addyosmani
311
21k
reverentgeek
27
2k
moore
125
21k
sferik
610
54k
paulrobertlloyd
71
3.6k
edds
56
9.4k
iamctodd
19
2k
maltzj
501
36k
danielanewman
200
20k
keathley
20
700
Transcript
Custom React Hooks! by Melody, 1x engineer ✨ Reactadelphia July
2019
hey hi, i’m melody! they/them { , , , }
melody.dev
Let’s talk hooks. “They let you use state and other
React features without writing a class.” —Dan Abramov
Say you have a blog:
Where can custom hooks be used? “where is stateful logic
involved?” “can this logic be reused?”
Where can custom hooks be used? <NavItem> <ReadIndicator> <ToggleTheme>
Where can custom hooks be used? history user preferences
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!
Hooks in action: useHistory() <NavItem> <ReadIndicator>
Hooks on the net! usehooks.com
useDarkMode() usehooks.com/useDarkMode
Hooks in action: useHistory() <NavItem> <ReadIndicator> useDarkMode() <Application> <ToggleTheme>
Hooks in action: useHistory() <NavItem> <ReadIndicator> useDarkMode() <Application> <ToggleTheme>
useYourImagination() Here are some helpful resources: • https://reactjs.org/docs/hooks-custom.html • https://usehooks.com
useThankYou() @pixelyunicorn @melody melody.dev/custom-hooks patreon.com/madebymelody SW-4207-5422-1528