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
95
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
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
25
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
Other Decks in Programming
See All in Programming
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
2
160
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
階層化自動テストで開発に機動力を
ickx
1
410
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Navigating Team Friction
lara
187
15k
Git: the NoSQL Database
bkeepers
PRO
431
65k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
BBQ
matthewcrist
89
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Statistics for Hackers
jakevdp
799
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Scaling GitHub
holman
461
140k
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