Slide 1
Slide 1 text
Comparing the philosophy of the
Store libraries for React
@kuwahara_jsri / kkeeth
Slide 2
Slide 2 text
Who am I?
const my_info = {
Name: ‘܂ݪਔ’,
Position: ‘FE Tech Lead/board’,
Skills: ‘PHP, Node.js, TS,’,
PokemonGO: ‘TL 40’,
}
Slide 3
Slide 3 text
01 02
Table of Contents
Thought Comparison of
Store Libraries
“Redux”, "Recoil",
and "Jotai"
Why do we need Store
library for front-end
development?
What kind of library
should be chosen in
the modern world?
03
Introduction Store Libraries Selection
Slide 4
Slide 4 text
+PVTQFWEVKQP
Why do we need Store library
for front-end development?
01
Slide 5
Slide 5 text
History of front-end
React(UI Lirary),
Vue, Svelte, Riot
HTML/CSS/JavaScript,
Monolithic(templates)
SPA/SSR,
Client-API
Frameworks,
Two-way data binding
State management,
Store/GraphQL
now…
Slide 6
Slide 6 text
5VQTG.KDTCTKGU
HQT4GCEV
Thought Comparison of Store
Libraries "Redux", “Recoil",
and “Jotai"
02
Slide 7
Slide 7 text
The clew
Redux Recoil Jotai
A Predictable State
Container for JS Apps
A state management
library for React
Primitive and flexible
state management for React
Slide 8
Slide 8 text
… before that
Flux 💁
Slide 9
Slide 9 text
Flux architecture
Slide 10
Slide 10 text
Flux architecture
Image By: https://azu.github.io/slide/react-meetup/flux.html
Slide 11
Slide 11 text
REDUX
A Predictable State Container for
JS Apps
Site: https://redux.js.org/
Slide 12
Slide 12 text
Redux architecture
Image By: https://blog.bitsrc.io/redux-free-state-management-with-jotai-2c8f34a6a4a
Slide 13
Slide 13 text
Redux three principles
● Single source of truth
● State in read-only
● Changes are made with pure functions
https://redux.js.org/introduction/three-principles
Slide 14
Slide 14 text
recoil
A state management library for
React
Site: https://recoiljs.org/
Slide 15
Slide 15 text
Recoil three principles
● Minimal and Reactish
● Data-Flow Graph
● Cross-App Observation
https://recoiljs.org/docs/introduction/core-concepts
Slide 16
Slide 16 text
Recoil working
Image By: https://morioh.com/p/3682bf6e369a
Slide 17
Slide 17 text
Jotai
Primitive and flexible state
management for React
Site: https://redux.js.org/
Slide 18
Slide 18 text
Jotai working
Image By: https://blog.bitsrc.io/redux-free-state-management-with-jotai-2c8f34a6a4a
Slide 19
Slide 19 text
Jotai three principles
● Primitive: Its basic interface is
pretty much like useState
● Flexible:Derived atoms can combine
other atoms and also allow useReducer
style with side effects
https://redux.js.org/introduction/three-principles
Slide 20
Slide 20 text
5GNGEVKQP
What kind of library should be
chosen in the modern world?
03
Slide 21
Slide 21 text
There are many ways
to think about selection
Slide 22
Slide 22 text
Comparison of Downloads
Slide 23
Slide 23 text
Comparison of size
Room Task link
redux 1.6kb https://bundlephobia.com/result?p=redux
react-redux 5k https://bundlephobia.com/result?p=react-redux
recoil 19.7kb https://bundlephobia.com/result?p=recoil
jotai 2.5kb https://bundlephobia.com/result?p=jotai
Slide 24
Slide 24 text
Facebook say
WE use React hooks 📣
Slide 25
Slide 25 text
Select the best Store Partner for
each project to have a good
development experience 😆
Slide 26
Slide 26 text
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, infographics &
images by Freepik
credits
https://slidesgo.com/theme/impostors-
among-crewmates#search-amoung+us
Slide 27
Slide 27 text
Thanks!