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
Jōtaiではじめる 超軽量 React.jsステート管理
Search
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Programming
0
89
Jōtaiではじめる 超軽量 React.jsステート管理
Gunma.web #44
Tsubasa SEKIGUCHI
PRO
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
820
Gunma.web #55
tinykitten
PRO
0
180
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
110
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
140
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
37
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
280
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
880
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
260
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
150
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
190
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
220
バリデーションライブラリ徹底比較
nayuta999999
1
200
ruby.wasmとWebSocketで遊ぼう!
lnit
0
140
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
720
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
110
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
430
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
670
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
270
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
180
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
100
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
The Invisible Side of Design
smashingmag
299
50k
Site-Speed That Sticks
csswizardry
6
570
Into the Great Unknown - MozCon
thekraken
38
1.8k
Unsuck your backbone
ammeep
671
58k
Facilitating Awesome Meetings
lara
54
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Typedesign – Prime Four
hannesfritz
41
2.6k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Bash Introduction
62gerente
613
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
JōtaiͰ͡ΊΔ ܰྔ React.jsεςʔτཧ Super lightweight and primitive state management for
React.js Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @ Online Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer I 💖 OSS & Cat🐈 Born
in Gunma🐴 Live in Tokyo🗼
Tsubasa SEKIGUCHI Λڌͱ͢Δ܈അݝલڮࢢੜ·ΕͷϑϦʔϥϯεͷ ϑϩϯτΤϯυΤϯδχΞɻ ͖ͬͨΜͱݺΕ͍ͯ·͢ɻ ͪͳΈʹࠓ26ࡀʹͳΓ·ͨ͠ɻ
෦ςελʔืूத TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
͡Ίʹ օ༷ʜ React.jsͷεςʔτཧɺͲ͏ͯ͠·͔͢ʁ RecoilΛओʹ͍ͬͯ·͢ɻ
͡Ίʹ ࠓճͷεϥΠυͰ Jōtaiͱ͍͏εςʔτཧϥΠϒϥϦ ʹ͍ͭͯ͠·͢ɻ
JōtaiͬͯԿʁ ฏͨ͘ݴ͏ͱʜ ϓϦϛςΟϒ͔ͭॊೈͳ React.js༻ εςʔτཧϥΠϒϥϦ ൃԻjoe-tieͱຊޠͱಉ͡Ͱ͢ɻ
ެࣜͷઆ໌͔ΒҾ༻͢Δͱʜ ϘτϜΞοϓɾΞϓϩʔνͷεςʔτϚωʔδϝϯτ Recoil͔ΒΠϯεύΠΞ͞ΕͨAtomicͳϞσϧ TypeScriptࢤͷඇৗʹϛχϚϧͳAPIΛ࣋ͭ JōtaiͬͯԿʁ
JōtaiΛ͏ͱԿ͕خ͍͔͠ Pros.
όϯυϧαΠζʜ Mini fi ed 8.1kB Mini fi ed + Gzipped
3.2kB JōtaiΛ͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/
[email protected]
ҰํRecoilʜ Mini fi ed 72.3kB Mini fi ed + Gzipped
21.1kB JōtaiΛ͏ͱԿ͕خ͍͔͠ https://bundlephobia.com/package/
[email protected]
JōtaiΛ͏ͱʜ Mini fi ed 64.2kB Mini fi ed + Gzipped
17.9kB ͷݮ͕Ͱ͖·͢ 0KB 20KB 40KB 60KB 80KB Mini fi ed Gzipped Recoil Jōtai JōtaiΛ͏ͱԿ͕خ͍͔͠
΄͔ʹ͜ΜͳϢʔςΟϦςΟ(jotai/utils)͕͋Γ·͢ localStorageͰatom(state)ͷӬଓԽ SSRಋೖ࣌ͷϋΠυϨʔτ Redux෩ͷReducer/ActionTypes JōtaiͬͯԿʁ ެ͔ࣜΒҾ༻atomӬଓԽͷσϞ
JōtaiͷΠϚΠνͳͱ͜Ζ Cons.
Ͳ͜ͰatomΛ࡞Εͯ͠·͏ͷͰʜ ComponentͰatomΛ࡞Δͱ͖ɺ ՃͰuseMemo/useRefͰ ϝϞԽΛ͢Δඞཁ͕͋Δ ެ͔ࣜΒҾ༻atom͕ಈతʹੜ͞Εͳ͍Α͏ʹ͢ΔσϞ JōtaiͷΠϚΠνͳͱ͜Ζ
atomWeakMapʹ֨ೲ͞ΕΔͷͰʜ atom͕ͯ͢ͷίϯϙʔωϯτ͔Β ࢀর͞Εͳ͘ͳͬͨ߹ ΞϯϚϯτ࣌ͳͲ GCͰ͕ॳظԽ͞ΕΔ JōtaiͷΠϚΠνͳͱ͜Ζ https://twitter.com/dai_shi/status/1380885195549597696
Recoil vs Jōtai ͦͦɺ JōtaiRecoilͱԿ͕ҧ͏ͷʁ
։ൃऀ RecoilFacebookνʔϜʹΑͬͯ։ൃ͞Ε͍ͯͯɺ JōtaiPoimandres(ݩreact-spring) νʔϜͷҰ෦։ൃऀʹΑͬͯ։ൃ͞Ε͍ͯΔ Recoil vs Jōtai
։ൃͷج४ Recoilେن։ൃ༷ʑͳཁٻʹ ରԠ͢ΔΑ͏ʹઃܭ͞Ε͍ͯΔ JōtaiϓϦϛςΟϒͳAPIΛॏࢹ͢ΔઃܭΛ͍ͯ͠Δ Recoil vs Jōtai
ٕज़తͳࠩҟ RecoilBUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtaiatomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
ٕज़తͳࠩҟ RecoilBUPNΦϒδΣΫτͷkeyʹରԠ͍ͯ͠Δ Jōtaiatomͷstring keyʹରԠ͍ͯ͠Δ Recoil vs Jōtai TrainLCDͷҰ෦ίʔυൈਮ(Recoil)
ݸਓతʹʜ େ͖ͳϓϩδΣΫτͷ߹ͬͺΓɺ Recoil͕҆৺͔ͳͱࢥ͍·͢ɻ খ͍͞ϓϩδΣΫτɺContext APIͰࠈʹͳ͍ͬͯΔ ϓϩδΣΫτʹɺ JōtaiΛಋೖ͍͍͔ͯ͠ͳͱࢥ͍·͢ɻ ·ͱΊ
खલຯḩͰ͕͢ʜ JōtaiΛͬͨϓϩδΣΫτΛ࡞Γ·ͨ͠ɻ Wordle෩ͷࠃͷӺ໊ͯήʔϜͰ͢ɻ ͥͻ͓ࢼ͍ͩ͘͠͞ɻ JōtaiΛͬͨϓϩδΣΫτ IUUQTTUBUMFUJOZLJUUFONF
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Gunma.web #44 ϑϦʔςʔϚ 2022.2.5 @
Online Tsubasa SEKIGUCHI