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
December 07, 2022
Programming
0
77
Jōtaiではじめる 超軽量 React.jsステート管理
Gunma.web #44
Tsubasa SEKIGUCHI
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
0
90
AWS/GCPで始める 生成AI入門
tinykitten
0
110
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
0
12
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
0
260
Rustとtonicで始める gRPC再入門
tinykitten
0
790
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
240
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
170
はじめての GitHub Actionsアクション開発
tinykitten
0
130
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
tinykitten
0
130
Other Decks in Programming
See All in Programming
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
110
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
480
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
130
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
460
CloudNativePGを布教したい
nnaka2992
0
110
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Unsuck your backbone
ammeep
669
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
GraphQLとの向き合い方2022年版
quramy
44
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Writing Fast Ruby
sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
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