State Management
Scope
This section covers libraries, patterns, and built-in APIs used for managing state within our frontend applications. This includes component state, shared state between components, global application state, and managing the state related to asynchronous operations (often overlapping with Data Fetching libraries).
Overview
ASSESS
Interesting technologies requiring investigation.
HOLD
Not recommended for new work; plan migration from existing uses.
Technologies Breakdown
React Context API ADOPT
Use for simple, low-frequency state sharing across component trees (e.g., theming, user authentication status). Avoid for high-frequency updates or complex global state due to potential performance issues (re-renders consumers unnecessarily). Often used in conjunction with other state management libraries.
Built directly into React, requiring no external dependencies for basic state propagation. Simple to understand for basic use cases. However, it's not optimized for performance in complex scenarios and doesn't provide built-in mechanisms for side effects or derived state computation like dedicated libraries.
Zustand ADOPT
Recommended as a primary choice for managing global or feature-specific state in most new React applications, especially where the complexity of Redux is not required. Suitable for both simple and moderately complex state.
Offers a simple, flexible, and unopinionated approach to state management with minimal boilerplate. Easy to learn and use, performs well due to selective component subscriptions, and can be used both inside and outside React components. Provides a pragmatic and efficient alternative to Redux for many use cases. Adopted for its simplicity and effectiveness.
Redux Toolkit (RTK) TRIAL
Recommended for large-scale applications with complex, shared global state, or where predictable state updates and robust debugging capabilities (Redux DevTools) are critical. Use the official Redux Toolkit for efficient setup and reduced boilerplate.
The long-standing standard for predictable state management in React. RTK significantly improves the developer experience over "classic" Redux by incorporating best practices. Provides excellent debugging tools and a large ecosystem. Adopted for complex state scenarios where its structure provides benefits.
Jotai TRIAL
Explore on specific projects or features where an atomic state management approach might be beneficial (e.g., highly distributed state, complex derived state dependencies, canvas-based applications). Evaluate its performance characteristics and developer experience compared to Zustand/RTK.
Implements an atomic state management model, where state is organized into small, independent pieces (atoms). This can lead to automatic performance optimizations as components only subscribe to the specific atoms they need. Trialing to understand the benefits and trade-offs of this different paradigm, assess its learning curve, and identify use cases where it might outperform hook-based stores like Zustand.