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
58
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
160
Sweetie Bot, Part 3 by Cloud Hop (#PonyDev @ BronyCon 2018)
pixely
0
73
Pony Podcast Programming by Corpulent Brony (#PonyDev @ BronyCon 2018)
pixely
1
99
How Equestria Was Made: Building EFNW's Website by Pixely (Everfree Northwest 2018)
pixely
0
420
IRC: Why it Failed by Cadey (#PonyDev @ Everfree Northwest 2018)
pixely
0
84
Other Decks in Technology
See All in Technology
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1k
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
140
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
260
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
190
PO初心者が考えた ”POらしさ”
nb_rady
0
220
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
230
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
140
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
2
900
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
A designer walks into a library…
pauljervisheath
207
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Automating Front-end Workflow
addyosmani
1370
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
It's Worth the Effort
3n
185
28k
Facilitating Awesome Meetings
lara
54
6.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bash Introduction
62gerente
613
210k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualization
eitanlees
146
16k
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