Managing State in React: Why You Don't Necessarily Need a Global State Manager

One of the core principles of React is the concept of unidirectional data flow, which means that data flows from the top-level components down to the lower-level components. This approach makes it easier to reason about the state of an application and to make changes to it.

One of the challenges that developers face when building React applications is managing state. State refers to the data that is stored in an application and determines how it behaves. In some cases, it may be necessary to share state between different components, which can be challenging to manage. However, contrary to popular belief, React does not necessarily need a global state manager. In this article, we’ll explore why this is the case and provide some code examples to demonstrate how to manage state in React without a global state manager.

Why React does not necessarily need a global state manager?

A global state manager is a pattern that is commonly used in web applications to manage state. This pattern involves storing state in a central location and providing access to it to all components in the application. This can make it easier to share state between different components and to manage complex state transitions. However, React provides several features that make it possible to manage state without a global state manager.

1. React components can have state

The first feature that makes it possible to manage a state without a global state manager is that React components can have a state. State is an object that contains data that affects how a component behaves and renders. When the state of a component changes, React re-renders the component and its children.

For example, consider a simple counter component that displays a count and allows the user to increment it. Here’s what the component looks like:

In this component, we’re using the useState hook to manage state. The useState hook returns an array with two values: the current state value (count) and a function to update it (setCount). We're also defining a function called increment that calls setCount to update the count.

By using state in this way, we can manage the count state within the component itself without needing to store it in a global state manager.

2. React provides a way to pass state as props

The second feature that makes it possible to manage state without a global state manager is that React provides a way to pass state as props. Props are a way to pass data from a parent component to a child component. By passing state down as props, we can share state between components without needing a global state manager.

For example, consider a simple app that displays a list of items and allows the user to toggle whether an item is selected or not. Here’s what the app might look like:

In this example, we’re using the useState hook to manage the items state in the ItemList component. The Item component receives the isSelected state as a prop, and when the user clicks the button, it calls the onSelect function that is passed down from the ItemList component to update the state.

By using props in this way, we can share state between components without needing to store it in a global state manager.

React provides a way to use context

The third feature that makes it possible to manage state without a global state manager is that React provides a way to use context. Context is a way to share data between components without needing to pass it down through props. It allows you to store data at a higher level in the component tree and make it available to any component that needs it.

For example, consider an app that displays a user’s name and allows them to update it. Here’s what the app might look like:

In this example, we’re using the createContext hook to create a UserContext that contains the user’s name and a function to update it. The NameDisplay and NameEditor components use the useContext hook to access the context data and update it.

By using context in this way, we can share the state between components without needing to pass it down through props or store it in a global state manager.

Conclusion

In conclusion, React provides several features that make it possible to manage state without a global state manager. By using these features, you can simplify your code and make it easier to reason about the state of your application. While global state managers can be useful in certain situations, it’s not always necessary to use them in React applications. With the examples provided in this article, you should have a good starting point for managing state in your own React applications.