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
2.2k
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
Let's Talk Transit Cards!
pixely
3
1.4k
Glowing Up... with Ponies!
pixely
0
13
lo-fi hip hop beats to npm install to!
pixely
0
2.4k
Web Development w/ IE6 (like it’s 2018!)
pixely
0
1.4k
Spooking Your Friends with Electron (BrooklynJS #59)
pixely
0
3k
Rebble.io by Peach Hack (#PonyDev @ BronyCon 2018)
pixely
0
97
Sweetie Bot, Part 3 by Cloud Hop (#PonyDev @ BronyCon 2018)
pixely
0
43
Pony Podcast Programming by Corpulent Brony (#PonyDev @ BronyCon 2018)
pixely
1
50
How Equestria Was Made: Building EFNW's Website by Pixely (Everfree Northwest 2018)
pixely
0
180
Other Decks in Technology
See All in Technology
⚡Lightdashを試してみた
k_data_analyst
0
220
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
220
Contrastive Self-Supervised Learning
yenlung
PRO
0
110
ニフティでSRE推進活動を始めて取り組んできたこと
niftycorp
2
790
Apache Kafka and the World of Streams
hashitokyo
0
130
Oracle Cloud Infrastructure:2022年5月度サービス・アップデート
oracle4engineer
PRO
0
150
【初心者向け】ググらずに!? ターミナル上で Pythonオブジェクトを調べよう
yumihiki
0
120
toilを解消した話
asumaywy
0
220
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
stripehideokamoto
0
130
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
1
210
信頼性の階層の一段目を積み上げる/Monitoring Dashboard
shonansurvivors
0
180
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
1k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Three Pipe Problems
jasonvnalue
89
8.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
920
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Adopting Sorbet at Scale
ufuk
63
7.5k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
Git: the NoSQL Database
bkeepers
PRO
415
59k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
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