8 Common Mistakes Developers Make with the useState Hook in React

The useState hook is a cornerstone of state management in React functional components, offering a simple and effective way to handle state. However, developers often make subtle mistakes when using useState, that can lead to bugs, performance issues, and unexpected behavior. As a software developer understanding these pitfalls is crucial to writing cleaner and more efficient code. Let’s explore the ten most common mistakes developers make when using useState and how to avoid them.

1. Overlooking the Functional Update Form

Developers often make the mistake of directly referencing the current state, which can lead to stale state values, particularly in asynchronous operations.

// Mistake: Directly referencing current state can lead to incorrect updates
setCount(count + 1);        

Solution: Use the functional update form, which provides the latest state value and ensures updates are accurate.

// Correct: Functional update form guarantees the latest state
setCount((prevCount) => prevCount + 1);        

2. Storing Derived State

A common mistake is storing values in state that can be computed directly from existing state or props. This approach increases complexity and the potential for synchronization errors.

// Mistake: Storing a derived state value unnecessarily
const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);        

Solution: Avoid redundant state by computing derived values during render.

// Correct: Calculate derived values without additional state
const [count, setCount] = useState(0);
const doubleCount = count * 2; // Computed directly        

3. Setting State in the Render Phase

Updating state directly inside the render phase is a recipe for infinite loops and performance issues. This mistake usually happens when developers mistakenly believe render reactivity handles all state changes.

// Mistake: Causes an infinite re-render loop
const [count, setCount] = useState(0);
setCount(1);        

Solution: Ensure state updates occur in controlled environments, such as event handlers or effects.

// Correct: State updates should happen in response to events
const handleClick = () => setCount(1);        

4. Directly Mutating State

Direct state mutation, particularly with objects or arrays, can lead to subtle bugs because React doesn’t detect changes that don’t involve a new state reference.

// Mistake: Mutating state directly
const [items, setItems] = useState<number[]>([1, 2, 3]);
items.push(4); // Mutation occurs here, and React may not re-render        

Solution: Always create a new copy of the state when updating.

// Correct: Return a new array to trigger re-renders
setItems((prevItems) => [...prevItems, 4]);        

5. Undefined or Incorrect Types for Complex State

When dealing with complex state objects, failing to specify the correct types can cause confusion and runtime errors.

// Mistake: Implicitly typed state leads to runtime errors
const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error        

Solution: Explicitly define state types to ensure correct usage.

// Correct: Define types to avoid errors
type User = { name: string; age: number };
const [user, setUser] = useState<User>({ name: "", age: 0 });
        

6. Using State Where Refs or Context Are More Appropriate

Overusing useState for values that don’t affect rendering, such as timers or mutable values, can degrade performance and readability.

// Mistake: Using state for mutable, non-rendering values
const [timerId, setTimerId] = useState<number | null>(null);        

Solution: Use useRef for mutable values or Context for shared state.

// Correct: Use useRef for values that don’t need re-renders
const timerIdRef = useRef<number | null>(null);        

7. Not Merging State Objects Properly

When managing state objects, developers sometimes forget that useState doesn’t automatically merge updates like class components' setState does. This mistake can cause parts of the state to be overwritten unintentionally.

// Mistake: Overwriting state instead of merging
const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // This will overwrite the entire state, losing the 'name' property        

Solution: Spread the previous state when updating to ensure that other properties are not lost.

// Correct: Spread the previous state to merge updates
setUser((prevUser) => ({ ...prevUser, age: 25 }));        

8. Using State for High-Frequency Updates

Using state to track values that change frequently, like window dimensions or mouse movement, can lead to performance degradation due to constant re-renders.

// Mistake: Using state for high-frequency updates
const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));        

Solution: Use useRef or debounce updates to minimize performance impact.

// Correct: Optimize with useRef for frequent updates
const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => (sizeRef.current = window.innerWidth);
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);        

Final Thoughts

Avoiding these common useState mistakes is crucial to developing robust, maintainable React applications. Proper type management, understanding state behaviors, and strategically updating state can significantly improve code quality and application performance. By embracing best practices, you’ll not only write cleaner code but also foster a deeper understanding of React’s inner workings—a hallmark of an experienced developer.