Introduction:

In large scale web applications modifying and maintaining the state of application in a cleaner way becomes very important. Even though we have many state management libraries like Redux that helps in maintaining and managing our states in an easier way, here I come up with the most common mistake we do in modifying the state that might lead to inappropriate behavior and a cleaner way to modify the state.

The problem with directly touching the state:

Consider the example given below-

import React,{ useState } from "react";

const TestState=()=>{
    const[count,setCount] = useState(4);

    const decrementCount=()=>{
        setCount(count-1);
        setCount(count-1);
    }
    return(
        <div>
            <button onClick={decrementCount}>Decrement</button><br/>
            <span>{count}</span>
        </div>
    )
}

export default TestState;

In this example, we want to decrement the count value on clicking the button. The initial value of count is set to 4. We are decrementing the count value by modifying the state variable count two times in the decrementCount method. Now everything seems fine here and our expectation is that the count variable should be decremented by 2 on every button click. When we try running the code we can see that the count variable is decremented only by 1 on every button click.

The working in background:

The issue here is that react always prefers batch state update in order to decrement the heavy re-rendering of our app and hence boosting the performance. There might also be many duplicate operations of state updates in our code which gets reduced due to batch updates, as react only considers the resultant state of our application and manipulates the DOM accordingly.

Here as we are updating our state variable count directly twice, both the operations are done with the initial state value at that moment and it becomes indirectly overridden and the resultant value is decreased by one. Consider the initial state value as 4 the resultant value becomes 3 on click as it is decreased by one.

Updating by not directly touching the state:

import React,{ useState } from "react";

const TestState=()=>{
    const[count,setCout] = useState(4);

    const decrementCount=()=>{
        setCout(prevState=>prevState-1);
        setCout(prevState=>prevState-1);
    }
    return(
        <div>
            <button onClick={decrementCount}>Decrement</button><br/><br/>
            <span>{count}</span>
        </div>
    )
}

export default TestState;

Here we are not directly touching our state count but we are somehow informing react that we should perform all the operations w.r.t the intermediate state (prevState) and all the updates should be done w.r.t previous state and overall resultant state update should be done in the DOM at the end. Hence here the behavior is as expected and the count value decrements by two on every button click. Consider the initial state value as 4 the resultant value becomes 2 on click as it is decreased by two.

Conclusion:

The state update is the crucial thing to manage in our application. The direct state should not be touched as much as possible as this might lead to inappropriate behavior in our application, specifically when multiple state changes are done in our application. We can adapt a cleaner way to maintain and modify our states.

Do check my LinkedIn page for more interesting posts, articles and updates.