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
Advanced State Management Patterns with React
Search
Francesco Strazzullo
October 03, 2019
Programming
0
130
Advanced State Management Patterns with React
Slides for ReactJs Day 2019 Workshop
Francesco Strazzullo
October 03, 2019
Tweet
Share
More Decks by Francesco Strazzullo
See All by Francesco Strazzullo
Strategic Testing Decisions - Build Stuff 2021
francescostrazzullo
0
83
Contract-Driven_Development.pdf
francescostrazzullo
0
590
Domain-Driven Frontend
francescostrazzullo
0
1.9k
Strategic Testing Decisions
francescostrazzullo
0
350
A DIY Guide To Building Your Own Rendering Engine - CityJS2021
francescostrazzullo
2
92
Technical Decision-making Anti-patterns - Avanscoperta Meetup 2021
francescostrazzullo
0
420
How to Choose Your Next Technology Stack
francescostrazzullo
0
1.5k
The Definition of Framework
francescostrazzullo
1
1.5k
How to Choose Your Next Technology Stack
francescostrazzullo
1
260
Other Decks in Programming
See All in Programming
A Gopher's Guide to Vibe Coding
danicat
0
190
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
160
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.4k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
120
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
RDoc meets YARD
okuramasafumi
4
160
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
260
🔨 小さなビルドシステムを作る
momeemt
2
620
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Optimizing for Happiness
mojombo
379
70k
Designing Experiences People Love
moore
142
24k
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Transcript
Advanced State Management Patterns with React
Francesco Strazzullo (AKA Strazz) @TheStrazz86 (Follow me on Twitter!) Ego
Slide
WE DEVELOP DIGITAL PROJECT TOGETHER WITH YOU.
http://frameworklessmovement.org/
https://www.apress.com/it/book/9781484249666 Use “TheStrazz” discount code
Source Code for the Workshop https://github.com/ideatosrl/reactjs-advanced-state-management-workshop
Why are you here?
What is “State Management”?
“State management refers to the management of the state of
one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface.” Wikipedia
React State API
None
None
None
None
None
What’s Wrong with that?
What is the best State Management Pattern?
None
Bring out tradeoffs
Framework Compass Chart
Model View Controller
“Trygve Reenskaug introduced MVC into Smalltalk-79 while visiting the Xerox
Palo Alto Research Center (PARC) in the 1970s.” Wikipedia
None
None
Reactive Programming (or I learned the real meaning of reactive
programming…)
Reactive Manifesto
Responsive, Resilient, Elastic, Message Driven
None
“In computing, reactive programming is a programming paradigm oriented around
data flows and the propagation of change.” Wikipedia
None
RxJS
None
Let’s try with an example
const a = b + c;
=B1+C1
None
None
None
Is React Reactive?
None
MobX
“MobX is a battle tested library that makes state management
simple and scalable by transparently applying functional reactive programming” MobX Getting Started
MobX helps you observe your Model
None
None
None
Event Bus
None
None
None
Redux
“A Predictable State Container for JS Apps” redux.js.org
Redux Cheatsheet Event = Action Model = Reducers Event Bus
= Store
None
Thanks! Francesco Strazzullo
[email protected]