This document discusses different types of state management in React including component state, application state, and mixing the two. It describes the pitfalls of lifting state up and prop drilling. It proposes using Zustand to compose state based on functional responsibility into separate slices like User State, Admin State, etc. and keeping actions with each state. Zustand allows automatic UI updates with React hooks without using context. A demo is linked.

1. Art of state management in
React
Saravanan Ramupillai
@sara_vananr

2. UI = F(state)

3. Kinds of State
1. State of an Component
2. State of an Application

4. Component State

5. App State

6. App State !== Component State

7. What if, we mix both

8. Pitfall of lifting State Up

9. Cognitive load
Prop drilling
Context passing
Unwanter re-rendering

10. Death by Monolith

12. Pain of Reducers

13. What could be the better way?

14. Composing State based on
Responsibility

15. User State Admin State Billing State
User Component Admin Component Billing Component
App State

16. User State Admin State Billing State
App State
WEB Mobile

17. Zustand

18. Zustand
1. Create app state based on functional responsibility
2. All the action that manipulates app state goes along
with state.
3. Auto updation of UI with the power of Hooks
4. After all, works without react context

19. Demo
https://codesandbox.io/embed/zustand-demo-kh9p1?fo
ntsize=14&hidenavigation=1&theme=dark