State Management IN ReaCT

Why State Management Matters

```
Applications grow complex
```
```
Data becomes scattered
```
```
Consistency becomes crucial
```
```
Predictability matters
```

React Context

A built-in API for sharing data across components without prop drilling.

React Context: Pros

```
Built-in API
```
```
Flexibility
```
```
Composability
```
```
Community Support
```

React Context: Cons

```
Performance
```
```
Complexity
```
```
Debugging
```
```
Testing
```

Redux

A Predictable State Container for JS Apps

Redux: The Established Powerhouse

```
Unidirectional data flow
```
```
Predictable state updates
```
```
Robust ecosystem and tooling
```
```
Can feel verbose and boilerplate-heavy
```

Redux: Key concepts

```
State
```
```
Actions
```
```
Reducer
```
```
Middleware
```
```
Store
```
```
Selectors
```

Redux: Data Flow

Redux: Useful links

Jotai

Primitive and flexible state management for React

Jotai: the agile challenger

```
Atomic state management
```
```
Simplicity and lightweight
```
```
Flexible and composable
```

Ecosystem and tooling still evolving compared to Redux.

Jotai: Key concepts

```
Atoms
```
```
Derived Atoms
```
```
Store
```
```
Subscriptions
```
```
Provider
```

Jotai: useful links

Beyond Redux and Jotai

Exploring Other State Management Options

Other State Management Options

When to Choose Which?

WHEN TO CHOOSE WHICH?

Project complexity
State needs
Team familiarity
Experiment!

Task

Build a Kanban board for task management
Allow users to add and move tasks between "To Do," "In Progress," and "Done" columns.
Allow users to update individual tasks
Add drag & drop functionality (use react-beautiful-dnd/react-dnd/dnd kit)

Made with Slides.com