React useState - How should I use the setter function? - reactjs

Question

Basic Situation
Let's say I have a basic useState of a number:
const [valueOne, setValueOne] = useState(0);
I can write an increase function in two ways:
First way:
// for one value
const increaseOneFirstWay = useCallback(() => {
setValueOne((prev) => prev + 1);
}, []); // doesnt have dependency
Since the setter function of a useState doesn't change (source), I don't have to add any dependencies to my callback function.
Second way
const increaseOneSecondWay = useCallback(() => {
setValueOne(valueOne + 1);
}, [valueOne]); // has one dependency
Here, since I am using valueOne, I have to add a dependency, so the callback updates accordingly.
For a basic callback like this, using both ways seems fine. But what if it gets more complicated?
Complicated Situation
Now, instead of having one state, we will have three:
const [valueTwo, setValueTwo] = useState(0);
const [valueThree, setValueThree] = useState(0);
const [valueFour, setValueFour] = useState(0);
This time, the callback will need to use all three values. And some of them together.
First way:
// for several values:
const increaseSeveralFirstWay = useCallback(() => {
setValueTwo((valueTwoPrev) => {
setValueThree((valueThreePrev) => {
setValueFour((valueFourPrev) => {
return valueFourPrev + valueThreePrev + valueTwoPrev + 1;
});
return valueThreePrev + valueTwoPrev + 1;
});
return valueTwoPrev + 1;
});
}, []); // doesnt have dependency
Second way:
const increaseSeveralSecondWay = useCallback(() => {
setValueTwo(valueTwo + 1);
setValueThree(valueThree + valueTwo + 1);
setValueFour(valueFour + valueThree + valueTwo + 1);
}, [valueTwo, valueThree, valueFour]); // has several dependency
Let's say that valueTwo, valueThree, and valueFour also change independently, wouldn't the first way be a better choice? Or is there a reason why someone would use the second way (Not opinion-based, but maybe performance? maybe it's not recommended at all to use the first way?)
Codesandbox

Answer 1

In the case you have multiple states depending on each other the solution is often to use a reducer. However sometimes the use of a reducer is not necessary since the state can be simplified.
I will here demonstrate the 2 solutions with 2 examples:
Solution 1: Using a reducer
useReducer is usually preferable to useState when you have complex
state logic that involves multiple sub-values or when the next state
depends on the previous one. -- React Docs
import { useReducer } from 'react';
const initialNumberState = {
valueOne: 0,
valueTwo: 0,
valueThree: 0,
};
const numberReducer = (prevState, action) => {
if (action.type === 'INCREASE_NUMBER') {
const { valueOne, valueTwo, valueThree } = prevState;
const newValueOne = valueOne + 1;
const newValueTwo = valueOne + valueTwo + 1;
const newValueThree = valueOne + valueTwo + valueThree + 1;
return {
valueOne: newValueOne,
valueTwo: newValueTwo,
valueThree: newValueThree,
};
}
return prevState;
};
const CustomComponent = (props) => {
const [numberState, dispatch] = useReducer(
numberReducer,
initialNumberState
);
const { valueOne, valueTwo, valueThree } = numberState;
const handleClick = () => {
dispatch({ type: 'INCREASE_NUMBER', value: 'not_used_in_this_case' });
};
return (
<div>
<ul>
<li>Number 1: {valueOne}</li>
<li>Number 2: {valueTwo}</li>
<li>Number 3: {valueThree}</li>
</ul>
<button onClick={handleClick}>Click Me!</button>
</div>
);
};
export default CustomComponent;
Solution 2: Simplifying the state
This is the case when we can derive all the data we need from independent states.
For example imagine we are validating a form with separate states:
const [isEmailValid, setIsEmailValid] = useState(false);
const [isPasswordValid, setIsPasswordValid] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
Here setting the state for the email and password validation is easy. However we start encountering issues when we want to set the state for the form.
handlePasswordChange = (event) =>{
passwordValue = event.currentTarget.value;
const isValid = validatePassword(passwordValue);
setIsPasswordValid(isValid);
const formValid = isPasswordValid && isEmailValid;
setIsFormValid(formValid);
/* Here we will encounter issues since we are updating
the form validity on a stale password validity value; */
}
Here the solution could have been : const formValid = isValid && isEmailValid;
But the optimal solution is simplifying the state:
const [isEmailValid, setIsEmailValid] = useState(false);
const [isPasswordValid, setIsPasswordValid] = useState(false);
const isFormValid = isEmailValid && isPasswordValid;
This is a simplistic example and you might think this never happens. But we often over complicate things.