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
420
IRC: Why it Failed by Cadey (#PonyDev @ Everfree Northwest 2018)
pixely
0
93
Other Decks in Technology
See All in Technology
Trust as Infrastructure
bcantrill
1
370
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
450
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
250
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
110
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
340
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Six Lessons from altMBA
skipperchong
28
4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Designing for humans not robots
tammielis
254
26k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Site-Speed That Sticks
csswizardry
11
890
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimizing for Happiness
mojombo
379
70k
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