Mastering the useState Hook in React

useState Hooks in React and Asynchronicity

One of the key aspects to understand when working with the useState hook in React is its asynchronous nature. When we call the state update function provided by useState, such as setValue, React schedules the state update but does not execute it immediately. This means that if we try to access the state immediately after its update, we are likely to encounter the previous, unchanged value. Therefore, using this hook does not guarantee that the value will be updated instantly after the state change.

What should we do in this case?

React itself recommends using an updater function:

setCount(count => count + 1)

In this example, count => count + 1 is the updater function. It takes the current state value (count) and calculates the next state based on it.

‍

useState Hook. Updating Objects and Arrays

When updating objects and array elements in the state, it is necessary to be careful. The issue is that with incorrect updating, you may lose all the data.

const [profile, setProfile] = useState({
  name: 'John Doe',
  age: 30,
});

If we try to update only one field, for example, the age, we will lose the rest of the data (in our case the name).

const updateProfile = () => {
  setProfile({age: 31});
}

The solution -- use the spread operator or other methods to update objects to preserve the other fields.

const updateProfile = () => {
  setProfile({...profile, age: 31});
}

// The same rules for arrays:
const [array, setArray] = useState([1, 2, 3]);

const updateArray = () => {
  setArray([...array, 4]);
}

‍

When to use useState Hook

At first glance, it might seem that useState should be used whenever we change any variable. But this is not the case! To understand whether we need to use useState or not, we need to ask ourselves the following questions:

• Do we have to preserve state between renders? If your component has to retain data or state between renders (for example, the value of a counter), then useState is ideal for this.

• Does the state change in response to user actions? If the state changes as a result of user interactions, such as entering text, selecting options, or pressing buttons, then this is a clear indication for using useState.

• Do data changes lead to changes in the component's interface? If you want changes in data to be immediately reflected in the user interface, for example, when updating a list or changing the style of an element, then useState is necessary.

• Is there a local state unrelated to other components? If the state is part of the internal logic of the component and does not require global management or data transfer between components, then useState is suitable for this task.

• Is there a need for toggling interface elements or managing modal windows? If you are working with elements that need to be shown or hidden (such as pop-ups or dropdown menus), then useState is perfect for managing their visibility.

When NOT to Use the useState Hook

• For constant or immutable Data: If the data does not change during the component's lifecycle, for example, constants or props that do not require changes, using useState is unnecessary.

• Complex or global state: For managing complex or global state that needs to be accessible in many components, it's better to use the Context API or specialized state management libraries like Redux or MobX.

• Computed data: For data that can be calculated directly from other states or props, use useMemo() or compute them directly in the rendering method to avoid unnecessary use of state.

• State that does not affect rendering: If changing the state does not lead to re-rendering or does not affect the component's output, probably, the state is not needed. In such cases, you can use useRef or regular variables.

Final Thoughts

Mastering the React useState hook is the key to creating responsive and interactive React applications. It is a tool that elegantly handles state changes, ensuring that components remain dynamic and user-friendly. As you dive deeper into React code, remember that useState functions is more than just state management; it's about unlocking the full potential of your app's interactivity.

‍

Related Hyperskill topics

• Intro to hooks
• State
• create-react-app
• Introduction to React