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.6k
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
62
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.4k
Rebble.io by Peach Hack (#PonyDev @ BronyCon 2018)
pixely
0
170
Sweetie Bot, Part 3 by Cloud Hop (#PonyDev @ BronyCon 2018)
pixely
0
84
Pony Podcast Programming by Corpulent Brony (#PonyDev @ BronyCon 2018)
pixely
1
100
How Equestria Was Made: Building EFNW's Website by Pixely (Everfree Northwest 2018)
pixely
0
430
IRC: Why it Failed by Cadey (#PonyDev @ Everfree Northwest 2018)
pixely
0
94
Other Decks in Technology
See All in Technology
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
2.9k
OCIjp_Oracle AI World_Recap
shinpy
1
170
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
120
Observability for the system understanding and curious by developers
maruloop
0
140
serverless team topology
_kensh
3
190
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
100
知覚とデザイン
rinchoku
1
440
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
840
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Typedesign – Prime Four
hannesfritz
42
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Balancing Empowerment & Direction
lara
5
700
The Cult of Friendly URLs
andyhume
79
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
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