React中useState Hook结合TypeScript的最佳实践：多元素状态管理方案抉择

Great question! This is a super common dilemma when building React components, and there’s no one-size-fits-all answer—it all boils down to how your state pieces relate to each other and how you plan to maintain them. Let’s break down both approaches and their best use cases:

When to Use a Single Nested State #

Opt for this approach when your state values are logically linked and part of the same concern (like a form or a tightly coupled UI component):

• Strong state dependencies: If one state change affects another (e.g., the accept button’s enabled state depends on the input’s hasInvalidValue), keeping them grouped makes the relationship explicit. Anyone reading your code can immediately see how these states work together.
• Whole-state operations: If you need to pass the entire state to child components (e.g., a form summary component that needs both input and button state) or reset the entire component state at once, a nested object simplifies these operations.
• Scalable logical units: If you anticipate adding more state properties related to the input or button later, nesting keeps related state organized instead of cluttering your component with dozens of separate useState calls.

Important Note for Nested State Updates #

Your example code has a small bug—when updating nested state, you need to preserve the existing properties of the nested object, otherwise you’ll overwrite them. Here’s the corrected version:

// Correct way to update a nested property without losing other state
setState(prevState => ({
  ...prevState,
  inputState: {
    ...prevState.inputState, // Preserve existing inputState properties
    focused: true
  }
}))

When to Use Multiple Independent useState Hooks #

Choose this approach when your state values are completely independent and serve separate concerns:

• Single-responsibility principle: Each useState handles one specific piece of state (e.g., isInputTextFocused only tracks focus state, hasUserClickedAccept only tracks button clicks). This makes your code easier to read, test, and debug—you don’t have to dig through a nested object to find where a state is updated.
• Simple updates: Independent state hooks eliminate the need for nested object spreading. Updating a single value is as straightforward as setIsInputTextFocused(true), which is less error-prone than nested state updates.
• Minimized re-renders: While React optimizes re-renders well, independent hooks mean only the components that depend on a specific state will re-render (though this is often negligible unless you’re dealing with high-frequency updates).

General Best Practices #

1. Start simple: If your component’s state is small and uncomplicated, either approach works. Many developers prefer independent hooks for simplicity until the state becomes logically linked.
2. Use useReducer for complex logic: If your state updates involve multiple steps, dependencies between state values, or asynchronous operations, useReducer is often a better choice than both nested useState and multiple hooks. It centralizes state logic and makes complex updates more predictable.
3. Avoid over-nesting: Don’t cram unrelated state into a single nested object just to reduce the number of useState calls. For example, if your component has both form state and a sidebar collapse state, keep those as separate state variables (or even separate contexts if needed).

At the end of the day, the goal is to write code that’s easy to understand and maintain for you and your team. Pick the approach that aligns with how your state behaves and evolves over time.

内容的提问来源于stack exchange，提问作者Keselme