React: State Management

Explore the guiding principles behind state management for React applications. Learn about various state management solutions and how to choose the right approach for your needs.

Introduction

• React: State management
• What you should know
• Exercise files and GitHub Codespaces

1. What Is State Management?

• What is state management and why should you use it?
• How to manage the state in React?

2. Managing the State with the Hooks

• useState: From stateless to stateful components
• useEffect: Apply side effects
• Handling complex logic with useReducer
• Moving logic into a function reducer
• Dispatching actions and applying side effects

3. There Is Only One Truth with Context API

• Why is a single source of truth important?
• Getting started with the context API
• Create a context object and a provider
• Create and manage a global state
• Challenge: Scaling and maintaining apps
• Solution: Subscribing to the context changes

4. Atomic State Management with Recoil

• Installation and getting started with Recoil
• Breaking up the source of truth into Atoms
• Updating and reading the state
• From state to derived data with Selectors
• Challenge: Subscribing to state changes
• Solution: Subscribing to state changes

5. Zustand: Simple and Modern State Management

• Zustand quickstart
• Counter app: Creating a store with a hook
• Binding components to the state
• Challenge: Create a centralized store
• Solution: Zustand in action 1/2
• Solution: Zustand in action 2/2

Conclusion

• Which solution should you pick next?