State Management

Welcome to Week 7: State Management

Welcome to Week 7, a crucial stage in your journey as we explore the ins and outs of State Management in React applications. This week, we'll delve into managing state at various levels, starting from component-level state to global state that is shared across the entire app.

We kick off the week with an introduction to React Router, a collection of navigational components that compose declaratively with your application. We'll learn how to structure our app's interface into a collection of 'pages', which we can then navigate through using React Router.

Our focus will then shift to advanced state management topics. We'll talk about why state management is challenging and explore solutions like global state, React Context, React Query, and useReducer to manage complex state logic in large applications. We'll also look at other global state libraries and the concept of encoding state in URLs.

At the end of the week, we'll put theory into practice with a project, where you will apply what you've learned about state management in a real-world context.

Learning objectives

By the end of this week, you will be able to:

  • Understand what React Router is and use it to manage navigation in your applications
  • Understand why state management can be challenging and the different strategies to tackle this
  • Use global state to share data across multiple components
  • Understand and use React Context to provide and consume global state
  • Use React Query to fetch, cache, and update data in your React apps
  • Use the useReducer hook to handle complex state logic in React components
  • Know other global state libraries available for managing state in React applications
  • Understand how to encode state in URLs and why it's useful
  • Apply all these concepts about state management in a hands-on project.