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
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
アジャイル開発とスクラム
araihara
0
160
FastConnect の冗長性
ocise
1
9.6k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Faster Mobile Websites
deanohume
306
31k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Review Best Practice
trishagee
66
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Bash Introduction
62gerente
610
210k
Music & Morning Musume
bryan
46
6.3k
What's in a price? How to price your products and services
michaelherold
244
12k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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