Common Props and State Mistakes That Cause React Bugs

Common Props and State Mistakes That Cause React Bugs

Most beginner React bugs come from a small set of props and state mistakes. Here are the common ones and how to avoid each.

Mutating State Directly

Changing a state variable directly instead of using the setter means React does not detect the change, and the UI does not update. Always use the setter function.

Mutating Objects and Arrays in State

Even with the setter, mutating the same object in place can fail to trigger a re-render because React compares references. Replace objects and arrays with new copies instead.

Copying Props Into State

Duplicating a prop into state creates two sources of truth that drift apart. Keep one source of truth: let the parent own the value.

Calling the Setter During Render

Calling a state setter in the render body causes an infinite re-render loop. Only update state in handlers, effects, or callbacks.

Storing Derived Values in State

If a value can be computed from props or other state, do not store it. Computing it during render avoids sync bugs.

Forgetting the key Prop in Lists

When mapping data to elements, missing keys or using the array index causes subtle bugs when the list changes.

Passing New References Every Render

Creating new objects or functions inline and passing them as props causes unnecessary child re-renders. This matters for performance-sensitive components.

The Takeaway

Most React bugs trace to: mutating state, duplicating data, updating during render, or storing derived values. Avoid these and a large share of beginner bugs disappear.