DEV Community

Cover image for State update methods in React: Performance
Sonay Kara
Sonay Kara

Posted on

State update methods in React: Performance

When managing state in React, two key points must be considered: performance and user experience.

State Update Methods

When updating state, the following method can be used:

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

However, while this method may seem appropriate, it can lead to issues when accessing the previous state value during asynchronous updates.

1. State Update with prevState

If the new state is calculated based on the previous state, it's essential to use prevState in order to avoid potential issues:

Example:

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

3. Updating Arrays and Objects

When updating arrays and objects, we also use prevState. However, for React to recognize that the state has changed and trigger a re-render, we use the spread operator to create a new object.

Example for Updating Arrays:

const [items, setItems] = useState([]);

setItems(prevItems => [...prevItems, item]);
Enter fullscreen mode Exit fullscreen mode

Example for Updating Objects:

const [user, setUser] = useState({ name: 'John', age: 0 });

setUser(prevUser => ({
    ...prevUser,
    name: 'Alice'
}));

Enter fullscreen mode Exit fullscreen mode

Conclusion

The methods you use to update state can impact the performance of your code. In this article, we examined the correct state update methods to ensure efficient state management.

Top comments (0)