#state-management

Explain the problem of state management in large frontend applications. What is "prop drilling"? How do libraries like Redux or Zustand solve this problem? Describe the basic concepts of a global store, actions, and reducers (or their equivalents).

Use Redux Toolkit for efficient Redux. APIs: 1. configureStore with defaults. 2. createSlice for reducers and actions. 3. Immer for immutable updates. 4. createAsyncThunk for async logic. 5. RTK Query for data fetching. 6. Entity adapter for normalized data. 7. TypeScript inference. 8. DevTools extension. No more action constants. Use createSelector for memoized selectors and implement listener middleware for side effects.

Manage state simply with Zustand. Implementation: 1. create() store with actions. 2. Minimal boilerplate vs Redux. 3. No providers needed. 4. Middleware for persistence. 5. Devtools integration. 6. Slices pattern for large stores. 7. Immer for mutations. 8. TypeScript support. Use selectors to prevent unnecessary renders and implement computed values with get() in store.

Leverage Valtio's proxy magic for state. Usage: 1. proxy() creates mutable state. 2. Direct property mutations. 3. snapshot() for immutable reads. 4. useSnapshot hook in React. 5. subscribe() for listeners. 6. Nested objects auto-tracked. 7. Derive computed values. 8. Works outside React. Simple mental model: mutate state directly, components auto-update. Use with class instances for OOP patterns.

Implement reactive programming with MobX. Concepts: 1. makeObservable or makeAutoObservable. 2. @observable for tracked properties. 3. @computed for derived values. 4. @action for state mutations. 5. observer() HOC for React. 6. reaction() for side effects. 7. runInAction for async updates. 8. Decorators or annotations. MobX automatically tracks dependencies. Use with TypeScript and strict mode for best practices.