Full Stack JavaScript Strategies

Chapter 15. State Management

With the repo established and the app ready to be developed, it’s time to start building views based on the Figma designs and your architecture diagram. You already have the header container mostly filled out, so you can see where you start to juggle multiple things like state, API calls, and conditional rendering.

Managing your state is going to determine how you handle dynamic data and values that change based on user actions. There are a few ways to approach state management, and most apps use a combination of the approaches to keep the code as simple as possible.

In this chapter, I’ll cover:

• Different ways to manage state and when you might use them

• The state lifecycle in React

• How to share state between components

• Prop drilling management

Understanding how state works, when it’s updated, and why you use different approaches is important. You need to have a deeper knowledge of this so that you can coach others on your team and you can write the most optimal code possible. When states aren’t managed correctly, that can lead to some strange side effects in the UI. So let’s start by diving into how component state works.

How Component State Works

In React, there is one method that controls how things are initially rendered on the page: the render method, which is usually in the main.tsx file. It looks like this:

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

The argument in ...