Get rid of common mistakes you might be making!

Yasas Sandeepa

·

Follow

Published in

Level Up Coding

·

9 min read

·

1 day ago

Listen

Share

React is a powerful library, but even experienced developers still make common mistakes, especially when handling state and effects. In this article, we’ll dive into the top 12 pitfalls that can lead to performance issues, unexpected behaviours, and difficult-to-maintain code.

Whether you’re a beginner or a seasoned React developer, understanding these mistakes will help you write cleaner, more efficient, and bug-free applications.

1. Functional State update over Direct State Update

You already know that if you need to update a state, you use the useState hook.

const [state, setState] = useState(0)

We can update this state in two different ways.

1) Direct Update Approach

setState(state + 1);

This approach is safe to use only when the new state does not depend on the previous state.

For example, setting a Fixed Value: If you’re setting the state to a constant value instead of updating based on the previous value:

setCount(10); // Always sets count to 10, no dependency on previous state.

But when we going to update a state setState(state + 1) there will be a problem.

The problem here is🚨:

• React does not guarantee that current state contains the latest state, especially when multiple state updates in a single render cycle happen.
• It can cause issues in asynchronous updates due to React’s batching mechanism.

Look at this example.

const [count, setCount] = useState(0)

setCount(count + 1);
setCount(count + 1);

This won’t increment the count twice because React reads count as the same value for both updates.

2) Functional Update

setState(prev => prev + 1);

This ensures that React correctly updates the state when relying on the previous state.