Common State Management Mistakes in React UI Apps

Common State Management Mistakes in React UI Apps

State management in a React UI has predictable mistakes. Here are the common ones and how to avoid them.

Copying Props Into State

Duplicating a prop into state creates two sources of truth that drift apart. Keep one source of truth and let the parent update it.

Storing Derived Values

If a value can be computed from props or other state, do not store it. Derived values cause sync bugs when the source changes and the stored copy does not.

Lifting Everything to the Root

Lifting all state to the app root creates a giant component and excessive re-renders. Lift only what siblings genuinely share; keep local state local.

Putting UI Flags in Redux

UI flags like modal open belong in local component state, not global state. Putting them in Redux or Context adds complexity without benefit.

Not Splitting Contexts

One Context holding many unrelated values causes consumers to re-render when any value changes. Split Contexts by change rate to avoid unnecessary re-renders.

Mutating State Directly

Mutating state instead of using the setter means React may not detect the change. Always use the setter and replace objects and arrays with new copies.

Wrong Dependency Arrays

Missing or wrong useEffect dependency arrays cause stale data and infinite loops. Use the hooks lint plugin to get them right.

The Takeaway

Common state mistakes include copying props into state, storing derived values, lifting everything to the root, UI flags in Redux, unsplit Contexts, mutating state, and wrong dependency arrays. Avoid these and state stays manageable.