This is How All Good React Developers Structure Their State.

Poorly structured React component state is a breeding ground for errors, bugs, and difficult debugging. Well-structured state, however, results in cleaner, more maintainable, and easier-to-debug components. Let's explore key principles for effective state management.

Fundamentals of Data Structuring

React components often rely on state. The number of state variables and the properties within object states are developer choices. Even with less-than-ideal structuring, a component might function, but we can strive for better. These guidelines will help you make informed decisions about your component's state structure:

1. Merge Interconnected States: Frequently updated states should be grouped. While separating states is acceptable, merging interconnected states significantly reduces the risk of synchronization errors. For example, consider aspect ratio:

<code class="language-javascript">// Less efficient:
const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);

// More efficient:
const [aspectRatio, setAspectRatio] = useState({ width: 500, height: 500 });</code>

Remember, when merging into an object, update all properties using the spread operator to avoid losing data:

<code class="language-javascript">setAspectRatio({ ...aspectRatio, width: 750 }); // Correct
// setAspectRatio({ width: 750 }); // Incorrect</code>

2. Avoid State Conflicts: Consider a submit button. You might use state to indicate loading, error, and success. The following structure is problematic:

<code class="language-javascript">// Problematic structure:
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [resolved, setResolved] = useState(true);</code>

This setup allows for contradictory states (e.g., loading and resolved simultaneously). A better approach uses constants to represent states:

<code class="language-javascript">// Improved structure:
const STATE = {
  loading: 'loading',
  error: 'error',
  resolved: 'resolved',
};
const [requestState, setRequestState] = useState(STATE.resolved);</code>

This prevents conflicting states and makes error tracking easier.

3. Avoid Unnecessary State: Before creating state, check if the value can be derived from props, existing state, or state combinations during rendering. If derivable, avoid adding it as component state.

<code class="language-javascript">// Inefficient:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [position, setPosition] = useState({ x: 0, y: 0 });</code>

Here, position is redundant. Either remove position or eliminate x and y.

4. Eliminate State Duplication: Duplicated state is difficult to keep synchronized. If you find yourself using multiple states to maintain the same data, consolidate them, potentially raising the state to a higher component level.

5. Minimize State Nesting: Deeply nested state is hard to update. "Flatten" or "normalize" it. Instead of nested objects, consider using arrays of IDs and a separate mapping from IDs to data. The depth of nesting is a trade-off, but flatter state simplifies updates and reduces duplication risks. Libraries like Immer can assist with managing immutable nested state.

If you have any questions, please leave a comment.

The above is the detailed content of This is How All Good React Developers Structure Their State.. For more information, please follow other related articles on the PHP Chinese website!