Battle of React State Managers in frontend applications

The battle of react global state
managers in web applications
Evangelia Mitsopoulou
Founder | Senior Frontend Engineer | Semantic Web Analyst | Writer
evangelia.me
https://www.linkedin.com/in/evangelia-mitsopoulou-
5765135/
20.02.24 - GreeceJS, Impact Hub Athens

Data Fetching Flow during first Page Load
Proxy Server Database
Browser
cache
1. Data transformation
2. Data binding
3. Data rendering
4. Data visualization
Data fetching
js- logic
Data fetching

Data Fetching Flow during first Page Load
Loading State
Error State
Concurrency
Rendered Data

Data Update Flow after first Page Load
HTTP
HTTP
HTTP

Problems to solved by global state
■ Issues with Predictable State Changes
■ Performance issues
■ Lack of Consistency
■ Concurrency issues
■ Caching issues
■ Scalability Testing and time travel debugging

When do we need a global state?
■ Complex applications with dependencies of data
■ Server side data fetching as database cache
■ Repeated calculations
■ Deep nested component hierarchies
■ Share User-input data
■ Broadcast messaging on event driven communication
■ Centralized handling of loading indicator

State management is …
■ How we handle the transition from one state to the other
State
Manager

Conceptual Framework
Atomic
03 ● Breaks down state into smaller,
independent pieces
Unidirectional
01
● Data flow towards one
direction, from store to the
components
Reactive
02
● Focus on automatic updates at
the components based on
changes on the state
State Machines
04
● Collection of finite states,
events and transitions between
states. Local state friendly

Conceptual Framework
Cache Friendly
05
● Works well with data fetching,
caching, retries, deduping and
synching,
React Built-in
06
● Data needs to be accessible by
many components at different
nested levels

React State Managers
Ecosystem Redux
Zustand
Vuex/Pinia
Ngrx/Store
MobX
Valtio
Akita
XState
Hooks + Context
Hooks + Props
Drilling
Reactive
Recoil
Jotai
Atomic Finite State Machines
Unidirectional
React Built-in
React Query
Data fetching friendly
SWR

Unidirectional Redux Toolkit
Increment
Component A
dispatch action
CounterSlice
Reducer
State
rerender/reacts
update/mutate
copy
Component B
Counter
rerender/reacts
{ .. }
(js-object)
Remember?
Counter: 1
{
type: 'INCREMENT'
payload '1'
}
(useSelector)
(dispatch(increment()
))
(useSelector)
Store

Redux-toolkit - Slices
import { configureStore, createSlice } from "@reduxjs/toolkit"
export interface CounterInitialState {
counter: number;
}
const counterInitialState: CounterInitialState = {
counter: 0;
}
const counterSlice: createSlice = ( {
name: "counter",
initialState: counterInitialState,
reducers: { increment: (state) => { state.counter +=1; } }
} )

export const store = configureStore ( {
reducer: {
counter: counterSlice.reducer,
},
} );
type RootState = ReturnType <typeof store.getState>;
export const selectCounter = ( state: RootState ) => state.counter;
export const { increment} => counterSlice.actions;
Redux-toolkit - Store/reducers

Redux-toolkit - Root App
const App: React.FunctionComponent = ( ) => (
<Provider store= {store}>
<div>
<h1>Unidirectional - Redux Toolkit</h1>
< IncrementButton/>
< Counter/>
</div>
</Provider>
);
export default App;
import { store } from "/.store";
import { Provider } from "react-redux";

Redux-toolkit - App Usage - Counter
import { selectCounter } from "/.store";
import { useSelector } from "react-redux";
const Counter: React.FunctionComponent = ( ) => {
const counter = useSelector (selectCounter) ;
return (
<div>
<span>Counter</span>
<div> { counter } </div>
</div>
) ;
};

Redux-toolkit - App Usage - Increment
import { store, increment, selectCounter } from "/.store";
import { useDispatch } from "react-redux";
const IncrementButton: React.FunctionComponent = ( ) => {
const dispatch = useDispatch ( ) ;
return (
<button onClick={ ( ) => dispatch( increment ( )) }>
Increment
</button>
) ;
};

Bidirectional/Reactive: MobX
Increment
Component A
Component B
Counter
observer
● *Implemented as class
● All properties are marked as
observable so that they are
tracked
Remember?
observer
react:rerender
action/update value
CounterStore
State
observable values*
f1
actions
f2
Counter: 1

MobX - Store
import { makeAutoObservable, observable } from "mobx"
class ApplicationStore {
counter = 0;
trials = 0;
constructor ( ) { makeAutoObservable (this, { })}
increment ( ) { this.counter += 1;}
decrement ( ) { this.counter -= 1;}
}
const store = new ApplicationStore ( );
export default store;

MobX - Counter/Increment Components
import { observer } from "mobx-react-lite"
import store from "./store"
const Counter: React.FunctionComponent = observer ( ( ) ) => (
<div>
<div> { store.counter } </div>
</div>
));
const IncrementButton: React.FunctionComponent = observer ( ( ) ) => (
<button onClick={ ( ) => store.increment ( ) }> Increment </button>) ;
};

MobX - RootApp
<div>
<h1>Unidirectional - MobX</h1>
<IncrementButton/>
<Counter/>
</div>
);
export default App;

Atomic: Recoil
Atom1
{
key: counter
default: '0''
}
Remember?
Component A
Increment
Component B
Decrement
Component C
View Total
Transactions
Selector 1
set get
get
get
{
key: 'increment'
default: '0'',
get: ({get})=>get(Atom1)*3
}
Selector 2
{
key: 'increment'
default: '0'',
get: ({get})=>get(Atom1) +
get(Atom2) + get(Atom3)
}
useSetRecoilState()
derives from
derives from
derives from derives from
. . .
. . .
Atom2
{
key: Products
default: '12''
}
. . .
. . .
Atom3 { .. }
(js-object)
. . .
. . .

Recoil - Atom Definition
import { useEffect } from "react"
import { atom, useRecoilSate, useRecoilValue, selector } from "recoil"
type Product = {
id: string;
name: string;
description: string;
onSale: boolean;
}
export const counterValueAtom = atom <number> ({
key: "counterValue",
default: 0,
})

Recoil - Atom & Selector definition
import { useEffect } from "react"
import { atom, useRecoilSate, useRecoilValue, selector } from "recoil"
export const productsAtom = atom <number> ({
key: "products",
default: [ ],
})
export const discountProductsAtom = selector <number> ({
key: "discountProductsAtom",
get: ({ get }) => {
const products = get (productsAtom);
return products?.filter( ( item) => item.onSale );
},
});

Recoil - Counter
import { useRecoilValue, useRecoilSate, RecoilRoot } from "recoil"
import { counterValueAtom, productsAtom, useProducts } from "./store"
const counter = useRecoilValue (counterValueAtom);
return (
<div>
</div>
);
};

Recoil - Increment Button
import { useRecoilSate} from "recoil"
import { counterValueAtom, } from "./store"
const [counter, setCounter] = useRecoilSate (counterValueAtom);
return (
<div>
<button onClick={ ( ) => setCounter ( counter + 1) }>
Increment
</button>) ;
</div>
);
};

Recoil - Products
const Products: React.FunctionComponent = ( ) => {
const products = useRecoilValue (productsAtom);
const discounts = useRecoilValue (productsAtom);
return (
<div>
<div> Products </div>
{products.map( ( product ) => {
return (
<div> {product.name} + {product.description} </div> )}};
<div> Number of Discounts </div>
<div> { discounts?.length} </div>
</div>
) }

Recoil - AppRoot
const App: React.FunctionComponent = ( ) => {
useProducts ( );
return (
<div>
<h1> Atomic - Recoil </h1>
<Counter />
<IncrementButton/>
<Products />
</div>
) ;
};
export default ( ) => (< RecoilRoot> < App/></RecoilRoot> )

React Query
■ It is an async state manager
■ Comes with smart fetching, caching, synchronising, and updating the server
state (persistent state) in your react application
Client State
URL / Router
Server State
Client
LocalStorage, Session
Storage, Cache API,
Cookies, IndexedDB
Persistent State

Why React Query?
■ Simplifies data fetching - Erases a lot of boilerplate and makes
your code easy to read.
■ Improves the reliability of server data by invalidates them
■ Provides tools to improve User Experience - Prefetching, re-
fetching, caching, and more.
■ Performance optimisations - Pagination and lazy loading.
■ Request Retries - Ability to retry in case of errors.
■ Window Focus Refetching - Refetching based on application tab
activity

TanStack Query
■ Formerly known as React Query v3
■ Aims to make the React Query async state manager, available
to frameworks beyond React, and comes with a variety of new
features
■ It exists now for
○ React @tanstack/react-query (React Query v4)
○ Svelte @tanstack/svelte-query
○ Solid @tanstack/solid-query
○ Vue @tanstack/vue-query

React Query- Types
import React, { useSate, createContext, useContext } from "react"
import { atom, useRecoilSate, useRecoilValue, selector } from "react-query"
type Product = {
id: string;
name: string;
description: string;
onSale: boolean;
}
interface ApplicationSate {
counter: number;
products?: Product [ ];
increment: ( ) => void;
}

React Query - ApplicationContext
const ApplicationContext: React.FunctionComponent = ( ) => {
const { movie} = createContext<ApplicationState> ( {
counter: 0,
products?: [ ],
increment: ( ) => { },
} );
import React, { useState, createContext, useContext } from 'react'

React Query - useApplicationState
const useApplicationState = ( ) : ApplicationState => {
const { counter, setCounter} = useState (0) ;
const { data } = useQuery<{
products: Product [ ];
}>( "products", ( ) => fetch ("/products.json ). then( (res ) => res.json( )), {
enabled: counter > 2,
})
return {
counter,
increment: ( ) => setCounter( counter+1),
products: data?.products,
}
}

React Query - contextProvider
const queryClient = new QueryClient ( );
const CounterItemsContextProvider : React.FunctionComponent = ( { children } ) =>
<ApplicationContext.Provider value = { useApplicationState( )}>
{children}
</ApplicationContext.Provider> );
export const ApplicationContextProvider : React.FunctionComponent = ( { children } ) => (
<QueryClientProvider client = { queryClient } >
<CounterItemsContextProvider> {children} </CounterItemsContextProvider>
</QueryClientProvider >
);
export const useApplicationContext = ( ) => useContext(ApplicationContext)

ReactQuery - Counter
import { useApplicationContext, ApplicationContextProvider } from "./store'
const { counter } = useApplicationContext ( );
return (
<div>
</div>
);
};

ReactQuery - Increment Button
import { useApplicationContext, ApplicationContextProvider } from "./store'
const { increment } = useApplicationContext ( );
return (
<div>
<button onClick={ ( ) => increment ( ) }> Increment </button>
</div>
);
};

ReactQuery - Products
const Products: React.FunctionComponent = ( ) => {
const { products } = useApplicationContext ( );
return (
<div>
<div> Products </div>
{products.map( ( product ) => {
return (
<div> {product.name} + {product.description} </div> )}};
</div>
) }

ReactQuery - AppRoot
<ApplicationContextProvider>
<div>
<h1> API - React Query </h1>
<IncrementButton/>
<Products />
<Counter />
</div>
</ApplicationContextProvider>
);
export default App;

State machines: Definition
■ Maths: A finite state machine is a mathematical model of
computation that describes the behavior of a system that
can be in only one state at any given time
■ Frontend: State machines are a formal and declarative way
to model and manage the state of an application. They
define all possible finite states that an application can go
through. Through events we can transite from one state to
the other

State machines UI Development
Finite State: is like a Behavior
which depending on the state
behaves different on events i.e.
click Play Button
State Video Playing
State Video Paused
click(PlayButton)
click(Pause Button)
Behavior C
State Machine
State Video not started
Behavior A
Behavior B

Traditional Event-driven UI Development
Init State
■ There is almost infinite set
of things that can be done
to a UI
■ Each element has a wide
range of possible mutations
Same state, different values on its
UI properties, after triggering events

State Machines - Core Concepts
■ Statecharts: Built on top of state machines for more
complicated mechanics
■ Actor Model: An actor is an own entity which can have its one
state machines or statecharts

■ Not tight to a framework or language
■ Local State first. Use Context for global state
■ XState is a JavaScript/TypeScript implementation of finite
state machines and statecharts. It is like useReducer, for local
Components state. Could be used globally as well in
collaboration with context or useQuery
State Machines - Core Concepts

XState - ApplicationContext
const ApplicationContext = createContext <ApplicationState> ( {
frame: 0,
thumbnail: ' ',
counter: 0,
movie: { url: ' ', thumbnail: ' ' },
running: false,
onPlay: ( ) => { },
onPause: ( ) => { },
onResume: ( ) => { },
} );

XState - useApplicationState
const useApplicationState = ( ) : ApplicationState => {
const [ state, send ] = useMachine (videoMachine);
return {
thumbnail: state.context.thumbnail,
frame: state.context.frame,
counter: state.context.counter,
movie: state.context.movie,
running: state.value !== "notstarted" && state.value !== "paused" &&
state.value !== "pausing"
onPlay: ( ) => send("PLAY"),
onResume: ( ) => send("RESUME"),
onPause: ( ) => send("PAUSE"),
} ;
};

XState - ApplicationContextProvider
export const ApplicationContextProvider: React.FunctionComponent = ({ children } ) => (
<ApplicationContext.Provider value={useApplicationState( )}>
{ children }
</ApplicationContext.Provider>
);
export const useApplicationContext = ( ) => useContext(ApplicationContext);

XState - videoMachine
const videoMachine = createMachine<VideoContext, VideoContent> ( {
id: "video",
initial: "notstarted",
context: { frame 0, movie: { url: '', thumbnail '', counter 0 } },
states: {
notstarted: { on: { PLAY: "started" } },
started: {
invoke: { id: "getMovie", src: (context, event)=> fetchMovie(),
onDone: { target: "success", } actions: assign({ movie:}),
on: { PAUSE: "paused" } },
paused: { on: { RESUME: "resumed" } },
starting: {} },
} )

XState - Types
import React, { createContext, useContext } from 'react'
import { useMachine } from '@xstate/react'
import { createMachine, assign } from 'xstate'
type VideoEvent = { type: "PLAY" } | { type: "PAUSE" } | { type: "STOP" } |
{ type: "RESUME" };
type VideoContext = {
thumbnail: string;
frame: number;
counter: number;
movie: Movie;
};
type Movie = { url: string; thumbnail: string; };

XState - LoadingStatus
import { useApplicationContext } from './store'
const LoadingStatus: React.FunctionComponent = ( ) => {
const { running, onPlay, onPause } = useApplicationContext ( );
return (
<div className="my-5">
<button onClick = {running ? onPause : onPlay } >
{ running ? "Pause" : "Start" }
</button>
</div>
);
};

XState - Movie
import { useApplicationContext } from './store'
const Movie: React.FunctionComponent = ( ) => {
const { movie} = useApplicationContext ( );
return movie.url ? (
<>
<div>Movie</div>
<video> { } </video>
</>
) : (
<img src={ movie.thumbnail } />
);
};

XState - App
import { ApplicationContextProvider } from './store'
const App: React.FunctionComponent = ( ) => {
<ApplicationContextProvider>
<div>
<h1> XState</h1>
< LoadingState/>
< Movie/>
</div>
</ApplicationContextProvider>
};
export default App;

Metrics Comparison Table
Feature Redux MobX Recoil Ngrx/Store Vuex XState
Immutability Enforces
immutability
through
reducers
Mutable
observables
Mutable atom
values
Enforces
immutability
through
reducers
Enforces
immutabilit
y through
mutations
Emphasizes
immutability
through state
machines
Predictability Actions,
Reducers,
Centralized
Store
Reactive
programming,
Observables
Atom-based
state
management
Actions,
Reducers,
Centralized
Store
Actions,
Mutations,
Centralize
d Store
Finite State
Machines,
State Charts

Metrics Comparison Table
Feature Redux MobX Recoil Ngrx/Store Vuex XState
Concurrency Limited due to
single state
tree
Good support
for
concurrency
with reactions
Limited
support for
concurrent
reactions
Supports
concurrency
through
actions
Supports
concurrency
through
mutations
Built with
concurrency
in mind
Performance Efficient update
through
Redux's diffing
Efficient due
to reactive
updates
Efficient,
but
depends
how atoms
are used
Efficient with
selective
memoization
Efficient
with Vue's
reactivity
system
Emphasizes
efficiency in
state
transitions

State Manager Destructuring
Fetching - Caching
Server state
TanStack Query
All possible states
Fetching
fetch/axios/http
Framework agnostic pieces
State Machines
Handling Async
Rxjs,
Middlewares,
Promises
Client state
Composable atomic
units
Server-side
rendering

Future trends for state management
■ Move away from monolithic solutions like Redux to more
atomic ones like Recoil, Zustand
■ Emphasis on composability and reusability
■ Emphasis on developer experience
■ Cache friendly
■ Server side state management

Data Transformation
■ Change name convention: i.s snake_case them
■ Add new fields for data normalization: key / id
■ Make data type-safe and on the desired shape for runtime
because Typescript solves problems during compilation time.

Data binding
data: [ {
id: '1',
description: 'test2',
image: url ('http://1')
},
id: '2',
image: url ('http://2')
} ]
data.json
video.json
video:
{
id: '1',
title: 'my video',
url: url ('http://1')
}
Source Code
Browser

Data binding
data: [
{
id: '1',
description: description item 1,
thumbnail: url ('http://1')
},
id: '2',
thumbnail: url ('http://2')
}]
data.json
Source Code
Browser

Data rendering
■ The process of generating visual representation based on input
data or instructions
■ Templating (Render Tree Construction)
○ HTML Parsing - Bytes -Tokenization - Nodes
■ DOM Construction
■ CSSOM Construction
■ Layouting
○ Mathematical calculation of the size and position of the
nodes
■ Painting
○ Actual positioning of the calculated elements on the screen

Concurrency
■ Definition: The ability of a web application to manage and execute
multiple tasks simultaneously
○ Rendering user interface
○ Making asynchronous requests
○ Processing user interactions in a non-blocking way
○ Service Workers
○ Error handling

Concurrency
■ Key aspects
○ Asynchronous programming
○ Multithreading - Web Workers
○ Event Loop
○ Concurrency control (throttling, debouncing)
○ Service Workers
○ Error handling

State: Definition
■ The state is just a snapshot or representation of the
system from the client-side at a given point in time
■ It includes things such as:
○ User preferences
○ User input
○ Navigation information
○ Fetched Data from API

Battle of React State Managers in frontend applications

Recommended

Recommended

More Related Content

Similar to Battle of React State Managers in frontend applications

Similar to Battle of React State Managers in frontend applications (20)

Recently uploaded

Recently uploaded (20)

Battle of React State Managers in frontend applications

Editor's Notes