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
93
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
1.1k
Gunma.web #55
tinykitten
PRO
0
200
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
110
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
140
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
41
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
280
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
910
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
ReadMoreTextView
fornewid
1
480
技術同人誌をMCP Serverにしてみた
74th
1
360
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
ニーリーにおけるプロダクトエンジニア
nealle
0
490
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
童醫院敏捷轉型的實踐經驗
cclai999
0
190
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
460
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
RailsConf 2023
tenderlove
30
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
GitHub's CSS Performance
jonrohan
1031
460k
Navigating Team Friction
lara
187
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Statistics for Hackers
jakevdp
799
220k
Embracing the Ebb and Flow
colly
86
4.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Side Projects
sachag
455
42k
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