State management is a core concept in all three frameworks—React, Vue, and Angular—but each handles it a bit differently. Here's a breakdown to help you compare:

React: Component-Based + External Libraries

React is all about components and hooks. State is usually managed locally or via external libraries.

Local State:

• useState for simple state
• useReducer for complex state logic
• useContext for prop drilling avoidance

Global State (popular libraries):

• Redux: Centralized store, actions, reducers
• Zustand: Minimalistic and intuitive
• Recoil: Atom-based state management
• Jotai: Primitive and flexible

Example:

const [count, setCount] = useState(0);

Vue: Reactive System + Vuex or Pinia

Vue has a built-in reactivity system that makes state management feel natural.

Local State:

• data() in components
• ref() and reactive() in Composition API

Global State:

• Vuex (Vue 2 & 3): Centralized store with mutations and actions
• Pinia (Vue 3+): Simpler, modular, and Composition API-friendly

Example:

const count = ref(0);

Angular: Services + RxJS

Angular uses services and dependency injection for state management, often combined with reactive programming.

Local State:

• Component properties
• @Input() and @Output() for parent-child communication

Global State:

• Services: Singleton services hold shared state
• RxJS: Observables and Subjects for reactive streams
• NgRx: Redux-inspired library for large-scale apps

Example:

count$ = new BehaviorSubject<number>(0);

Summary Table