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
49
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.3k
Rebble.io by Peach Hack (#PonyDev @ BronyCon 2018)
pixely
0
150
Sweetie Bot, Part 3 by Cloud Hop (#PonyDev @ BronyCon 2018)
pixely
0
61
Pony Podcast Programming by Corpulent Brony (#PonyDev @ BronyCon 2018)
pixely
1
86
How Equestria Was Made: Building EFNW's Website by Pixely (Everfree Northwest 2018)
pixely
0
390
IRC: Why it Failed by Cadey (#PonyDev @ Everfree Northwest 2018)
pixely
0
70
Other Decks in Technology
See All in Technology
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
2.5Dモデルのすべて
yu4u
2
610
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
4 Signs Your Business is Dying
shpigford
182
22k
Fireside Chat
paigeccino
34
3.2k
Gamification - CAS2011
davidbonilla
80
5.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Optimizing for Happiness
mojombo
376
70k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Designing for humans not robots
tammielis
250
25k
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