React: Effective UI State Management Practices

As web development evolves, it is important to choose the right practices that help us create a scalable, readable, maintainable, and testable codebase. In this blog series, we will look at different practices that help us create such a codebase.

This blog series is divided into three topics:

1. Application Design
2. State Management
3. Testing Practices

State Management

Bridging the gap between business goals and React implementation requires thoughtful state design. In today's blog, we will be exploring the following practices under State Management:

• Understanding the state
• Efficiently managing the form state
• You Might Not Need a useEffect

Understanding the state

To build performance-heavy applications, it is important to understand the scope of state and what should go into it. State should be placed as close as possible to the components that require the data, to avoid unnecessary re-rendering. Identify what doesn't qualify as state

• Does it remain unchanged over time? If yes, it isn’t state.
• Is it passed in from a parent via props? If yes, it isn’t state.
• Can you compute it based on existing state or props in your component? If yes, it definitely isn’t state.

Reference: Find the minimal but complete representation of UI state

Efficiently Managing Form State

Maintaining the state of forms is as important as managing application-level state. Forms have unique needs such as handling frequent changes, applying validation, and processing submissions. Since form state changes frequently, place it close to the form component to:

• Improve application performance by avoiding unnecessary re-rendering of other components.
• Test the behaviour of the form, not its internal implementation.

You Might Not Need a useEffect

useEffect is an escape hatch in React, allowing interaction with external systems such as non-React widgets, network calls, or the browser DOM. Avoid using useEffect just to update a component’s state from prop or state changes.

• You don’t need Effects to transform data for rendering.
• You don’t need Effects to handle user events.

Reference: You Might Not Need an Effect

That’s all for today. In the next blog, we’ll explore best practices for testing React applications.