Every space has a story

State Handling in React JS

11 April 2024

React's component-based architecture enables developers to create reusable, composable UI elements. However, as applications grow in complexity, managing the state of these components becomes crucial for maintaining a predictable and efficient user experience.

In React, state refers to the data that determines a component's behavior and rendering. It encapsulates the current state of a component and influences its appearance and interactions. Understanding how to manage state effectively is fundamental to building robust and scalable React applications.

In this article, we'll dive into the fundamentals of state handling in React, exploring various techniques and best practices for managing state within components. We'll cover local component state, and application level state handling techniques with libraries like Redux, Zustand, and Context API. By the end, you'll have a comprehensive understanding of which path to choose for difference scenarios.

State Management Flow Chart

MethodUse CaseExample
useState (component)Scoped to a single componentselected state in Single Component (product-variations/index.jsx) The property is used only in this component.
useState (page)Scoped to a single pageisOverlayOpen state in CustomizationContainer (customization-component.js) The property is part of an object that is passed as a prop to AddToCartModalComponent (and no further).
Context APIProp drill is needed for more than one levelPDP, where we might have component/page state for "selected option set" and some deep component needs to know about it.
Zustand/ReduxNeeded across the application and is based on user action, whether that be: - Direct input (Eg. deliveryInfo.phone) - Selection of explicit options (Eg. fulfillmentDate) - Selection of implicit options (Eg. storeId) - System assigned value that can’t be querieddirectly (Eg. orderId)In addition to the use case-specific examples at left, you can find the rest of the global store in /stores
SWR Hook- Managing data fetching and server managed state - useSWR is able to fetch backend data, as well as manage caching for redundant requests - Supports traditional HTTP requests as well as graphQL queries.
URL query paramsWhen page level state needs to be set from outside of the page.Passing an orderId from an email, etc.

Application Flow

Application flow with selection of state management options

With the help of above example, you can decide which path to got with.