Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual Intro to Custom React Hooks
Search
Inky Collective
July 16, 2019
Technology
0
2.5k
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
Glowing Up... with Ponies!
pixely
0
37
lo-fi hip hop beats to npm install to!
pixely
0
2.8k
Web Development w/ IE6 (like it’s 2018!)
pixely
0
1.7k
Spooking Your Friends with Electron (BrooklynJS #59)
pixely
0
3.2k
Rebble.io by Peach Hack (#PonyDev @ BronyCon 2018)
pixely
0
140
Sweetie Bot, Part 3 by Cloud Hop (#PonyDev @ BronyCon 2018)
pixely
0
53
Pony Podcast Programming by Corpulent Brony (#PonyDev @ BronyCon 2018)
pixely
1
78
How Equestria Was Made: Building EFNW's Website by Pixely (Everfree Northwest 2018)
pixely
0
340
IRC: Why it Failed by Cadey (#PonyDev @ Everfree Northwest 2018)
pixely
0
59
Other Decks in Technology
See All in Technology
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
AWSでRAGを作る法方
sonoda_mj
1
140
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
エンジニア向け会社紹介資料
caddi_eng
14
220k
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Typedesign – Prime Four
hannesfritz
37
2.2k
Web development in the modern age
philhawksworth
203
10k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
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