Choosing the Right State Update Method Normal vs. Functional State Updates in React

State management plays a crucial role in building robust React applications. When it comes to updating state, React offers two approaches: normal state updates and functional state updates. In this article, we’ll explore the differences between these methods and understand why functional state updates are necessary in certain scenarios.

Normal State Updates:

The traditional approach to updating state in React is through normal state updates. In this method, you directly modify the state variable using methods like?setState?or the?useState?hook.

Let’s consider an example:

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;        

Functional State Updates:

Functional state updates provide a more reliable way to modify state in React. Instead of directly updating the state variable, you pass a function to the?setState?method or the?useState?hook. This function receives the previous state as an argument and returns the new state value.

Consider the following example:

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;        

Why Do We Need Functional State Updates and the Problem with Normal State?

The need for functional state updates arises from the?problem of stale state?and ensuring accurate state transitions. In normal state updates, subsequent state updates are based on the previous state value. However, when dealing with asynchronous updates or multiple state updates within a single function or event handler, the current state may not be up to date. This can lead to inconsistencies and unexpected behavior in your application.

Let’s illustrate this problem with an example.

Suppose you have a component that increments the count by 10 three times when a button is clicked:

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 10);
    setCount(count + 10);
    setCount(count + 10);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;        

In this case, you might expect the count to increase by 30 after three button clicks. However, due to the nature of normal state updates, the value of?count?will only increase by 10, as each?setCount?call operates on the stale value of?count.

Functional state updates solve this problem by providing the previous state value as an argument within the updater function.?By accessing the previous state, you can perform computations or transformations based on the latest state, ensuring accurate and reliable state transitions.

To fix the example above using functional state updates, you can modify the?increment?function as follows:

const increment = () => 
  setCount((prevCount) => prevCount + 10);
  setCount((prevCount) => prevCount + 10);
  setCount((prevCount) => prevCount + 10);
};        

By using the updater function?(prevCount) => prevCount + 10, each?setCount?call will correctly operate on the latest value of?count, resulting in an increment of 30 after three button clicks.

In conclusion, functional state updates offer a?reliable solution for managing state in React, especially in scenarios involving asynchronous updates or multiple state updates within a single function or event handler.?By adopting functional state updates, you can ensure the accuracy of state transitions and avoid issues related to stale state in your React components.

Happy coding ??!

Source of this post:?apoorveverma.com