Common Class Component Mistakes Developers Still Make

Common Class Component Mistakes Developers Still Make

Even though new code uses hooks, class component mistakes still appear in legacy code and interviews. Here are the most common ones.

Forgetting to Bind Methods

Class methods that use this lose their binding when passed as callbacks, so this is undefined. You must bind in the constructor or use arrow function class fields.

Mutating State Directly

Writing this.state.value = 5 instead of this.setState does not trigger a re-render. Always use this.setState to update state.

Using this.setState Synchronously

this.setState is asynchronous. Reading this.state right after calling it shows the old value. Pass a function if the new state depends on the previous.

Forgetting Cleanup in componentWillUnmount

Setting up a subscription or timer in componentDidMount but forgetting to clean it up in componentWillUnmount causes leaks.

Fetching in render

Fetching or mutating state directly in render causes infinite loops and inconsistent state. Side effects belong in lifecycle methods, never in render.

Not Handling Prop Changes in componentDidUpdate

When a prop changes and you need to refetch, you must do it in componentDidUpdate by comparing prevProps to current props. Forgetting this leaves stale data.

Calling setState on an Unmounted Component

If an async callback calls setState after unmount, React warns. Track mounted state or cancel async work in componentWillUnmount.

The Takeaway

Class component mistakes include unbound methods, direct state mutation, treating setState as synchronous, missing cleanup, side effects in render, and stale data from ignored prop changes. Knowing these helps you read and fix legacy code.