state-management.md

State Management

Context

Types of State:

• Local State
  • e.g. React useState Hook
• Shared State
  • e.g. React Context, Redux
• Remote State (i.e. API)
  • e.g. React Context, Redux

Shared State Options:

• redux + redux-observable + rxjs + react-redux
  • Drawbacks
    • Boilerplate
• React Context
  • Drawbacks
    • "Provider Hell"
    • Unintentional Re-Renders
• constate / recoil / react-tracked

Remote State Options:

• redux + redux-observable + rxjs + react-redux
  • Drawbacks
    • Boilerplate
• React Context
  • Drawbacks
    • "Provider Hell"
    • Unintentional Re-Renders
• constate / recoil / react-tracked / @tanstack/react-query

Decision

• Local State: React useState Hook
• Shared State: recoil
• Remote State: @tanstack/react-query

Rationale

References

• The Tragedy of Scale
• jotai Comparison
• @tanstack/react-query
• recoil
• react-sweet-state Comparison
• react-tracked Comparison