4 Common Mistakes to Avoid with `useState` in React 🤔

2 min readJun 21, 2024

Hey there👋,

My name is Md Taqui Imam, and today I’m going to talk about some common mistakes people make when using `useState` in React.

You can check out more of my work on my portfolio.

Let’s get started!

1. Setting State Based on Previous State Incorrectly

One common mistake is setting state based on its previous value without using the proper function syntax. For example:

const [count, setCount] = useState(0);
// This is wrong
setCount(count + 1);

Instead, use a function to access the previous state:

setCount(prevCount => prevCount + 1);

This ensures that you’re always working with the most up-to-date state.

2. Forgetting to Initialize State

Another mistake is not initializing state properly. Always make sure to provide an initial value when you use `useState`:

const [name, setName] = useState(''); // Initializing with an empty string

If you forget to do this, you might run into unexpected issues when React tries to use your state.

3. Updating State with Objects Incorrectly

When working with objects in state, it’s important to merge the old state with the new state correctly. Here’s a mistake:

const [user, setUser] = useState({ name: '', age: 0 });
// This will replace the entire user object
setUser({ name: 'Taqui' });

To merge the new state with the existing state, use the spread operator:

setUser(prevUser => ({ …prevUser, name: 'Taqui' }));

This way, you keep the existing properties and only update the ones you need.

4. Using State Inside Loops, Conditions, or Nested Functions

Avoid using `useState` inside loops, conditions, or nested functions. This can lead to inconsistent state and bugs:

if (someCondition) {
 const [value, setValue] = useState(0); // Don't do this
}

Instead, declare all your state hooks at the top level of your component:

const [value, setValue] = useState(0);
if (someCondition) {
 // Use value or setValue here
}

This ensures that your state is managed consistently.

Conclusion

Avoiding these common mistakes can help you write cleaner and more efficient React code. Remember to always initialize your state, update it correctly, and use `useState` properly.

Happy coding!

— -

Thanks for reading! I’m Md Taqui Imam, and you can find more of my work on my portfolio.

Follow Me For This Type of Blog Post🫡.