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
作ろう、Custom Hooks
Search
surumebeer
October 02, 2019
Programming
1
270
作ろう、Custom Hooks
surumebeer
October 02, 2019
Tweet
Share
More Decks by surumebeer
See All by surumebeer
about ES and TC39
surumebeer
0
210
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
"config" ってなんだ? / What is "config"?
okashoi
0
220
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
430
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
Semantic search with Django and pgvector
pauloxnet
0
240
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
Java 22 Overview
kishida
1
170
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
220
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
A Philosophy of Restraint
colly
196
16k
A Tale of Four Properties
chriscoyier
150
22k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Making Projects Easy
brettharned
108
5.5k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Web Components: a chance to create the future
zenorocha
305
41k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
It's Worth the Effort
3n
180
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Transcript
作ろう、Custom Hooks 表参道Web勉強会 『Vue.js/PWA/JavaScript…新&定番なんでもあり』 Vol8 @sururmebeer
Shuji Nishino @surumebeer 株式会社 でフロントエンドエンジニアしてます
今日話すこと…
React Hooks
React Hooksとは? • React 16.8から追加されたAPI • 関数型コンポーネントでのみ利用可能 • 関数型コンポーネント自体が状態を持てるようになった •
関数型コンポーネント内で副作用の実行も可能
None
state state更新用の関数 useStateの宣言 stateの初期値
None
useEffectの宣言 副作用 副作用が依存 している関数
stateの操作をCustom Hooks化
None
Hooksを使ってロジック部分を関数として切り離す
Custom Hooksを作って嬉しいこと • ロジック部分を分割して管理ができる • 分割したロジックを、コンポーネントの階層構造に影響することなく共有・再利用できる • プレゼンテーションのコンポーネントは、プレゼンテーションのみに専念させられる
もうちょっと実践的に…
fetchしたjsonを表示する
None
ロジック部分 プレゼンテーション ロジックとUIが同じ関数コンポーネント内にある
Custom Hooksとして切り離す
Hooksを使ってロジック部分だけ関数として切り離す
None
スッキリ!
ご清聴ありがとうございました