DEV Community

Cover image for The 4 Most Common Mistakes When Using useState in React
Sonay Kara
Sonay Kara

Posted on

The 4 Most Common Mistakes When Using useState in React

When using useState, you may make mistakes, and these mistakes can sometimes reduce performance. As a result, your application may run inefficiently. If you avoid the common mistakes I'm about to explain, your application will run efficiently and with better performance.


If you like my articles, you can buy me a coffee :)
Buy me coffee


1. Using a Function to Initialize useState

When initializing state with useState, if the initial state is the result of an expensive function, this function will be called on every render. This can severely impact performance, especially if the function involves complex computations.

Incorrect usage:

const [data, setData] = useState(expensiveFunction());
Enter fullscreen mode Exit fullscreen mode

In this example, expensiveFuncttion is called on every render, leading to unnecessary performance costs.

Correct usage:

const [data, setData] = useState(() => expensiveFunction());
Enter fullscreen mode Exit fullscreen mode

By using a function inside useState, the expensiveFuncttion is only called during the initial render, saving resources on subsequent renders.


2. Misusing the setState Function

When updating state in React, especially when the new state depends on the previous state, it's important to use the functional form of setState. A common mistake is updating state without taking the previous value into account.

Incorrect usage:

setCount(count + 1);
Enter fullscreen mode Exit fullscreen mode

This can cause issues if multiple updates are triggered in quick succession because count might not have the most updated value.

Correct usage:

setCount(prevCount => prevCount + 1);
Enter fullscreen mode Exit fullscreen mode

This approach ensures that the state is updated based on its previous value, making it more reliable.


3. Incorrect Placement of useState

Placing hooks inside loops, conditions, or nested functions can break React's state management mechanism.

Incorrect usage:

if (condition) {
  const [value, setValue] = useState(false);
}
Enter fullscreen mode Exit fullscreen mode

This violates React's rules because useState should not be placed inside conditional statements

Correct usage:

const [value, setValue] = useState(false);

if (condition) {
  // Use the state here
}
Enter fullscreen mode Exit fullscreen mode

By keeping useState outside of conditions or loops, React can properly manage the order in which hooks are called.


4. Mutating State Directly

State in React should be treated as immutable. Directly mutating the state can lead to unexpected bugs and issues, particularly when dealing with objects or arrays.

Incorrect usage:

const [user, setUser]= useState({ name: 'John', age: 35 });
user.name = 'Jane';  // Incorrect mutation
setUser(user);       // Incorrect update
Enter fullscreen mode Exit fullscreen mode

Mutating user directly doesn't trigger a re-render because React doesn't detect the state change.

Correct usage:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));
Enter fullscreen mode Exit fullscreen mode

Here, a new object is created using the spread operator, ensuring the immutability of state and triggering a proper re-render.


Conclusion

In this article, we learned how the useState hook works. If you pay attention to the points I’ve explained, the performance and efficiency of your application will improve.

Top comments (4)

Collapse
 
jasuperior profile image
Ja

I believe that most of these cases are rejected by the react linter rules. Particularly point 3. Still, I see this kinda code all the time, and its great to give people reminders of good coding practices. 😜

Collapse
 
sonaykara profile image
Sonay Kara

Thank you ja. Yes you are right

Collapse
 
miketalbot profile image
Mike Talbot ⭐

In 1 the correct usage is:

const [data, setData] = useState(expensiveFunction);
Enter fullscreen mode Exit fullscreen mode

No point making a new function that just calls an existing function!

Collapse
 
sonaykara profile image
Sonay Kara

This usage is correct, but in this article, it was considered that the function could take arguments.