State Management in React

Overview

1. Background
    
2. Approaches
    
3. Context
    
4. Balance
    
5. Example
    
6. Guidance
    
7. Suggestions

Background

• state = mutable data

• discussion independent of techniques for reusing logic
  
  (higher order components, render props, hooks, component composition)

Approaches

React

single state tree (redux, mobx)

react context

atomic state (recoil, jotai)

network cache
(Apollo, Relay, react-query, SWR)

global objects

component state

Context

• system state (environment connectivity)

• accessible state (external URL configuration)

• UI state (active tooltip, open modal)

• remote state (server session)

Balance

Experience

Performance

Flexibility

Scalability

Costs

Example

Introduction to react-query. A Redux alternative?

• Presentation (Youtube)

• Slides (Slideshare)

Guidance

Suggestions

• leverage standard visual states in CSS (hover, focus...)

• encapsulate code and colocate it near its usage

• when referring to errors use compatible Error instances

• use a naming pattern for boolean values (e.g. isX, hasX) 

• start locally to reduce the risk of global side affects

• differentiate between different types of state