✒️
Here are my favorite tips to land the software engineer interview.
Here are my favorite tips to land the software engineer interview.
How to Properly Set Multiple States Inside Multiple useEffect Hooks in React
Published Jun 6, 2020
∙ Updated May 2, 2022
Suppose we have a state that we’ve initialized using useState()
.
const [ count, setCount ] = useState({
a: 0,
b: 0
});
Suppose we want to update multiple attributes inside count
using different useEffect()
hooks.
We might think to write it this way.
useEffect(() => {
setCount({ ...count, a: props.a });
}, [props.a]);
useEffect(() => {
setCount({ ...count, b: props.b });
}, [props.b]);
The problem with this approach is that a
may never be updated.
Both useEffect()
hooks run in the same React cycle and the same context. This means that the value of a
and b
inside ...count
is exactly the same in both useEffect()
hooks. The second setCount()
will inevitably replace the first setCount()
.
In order to solve this problem, we can do this instead:
useEffect(() => {
setCount((count) => ({ ...count, a: props.a }));
}, [props.a]);
useEffect(() => {
setCount((count) => ({ ...count, b: props.b }));
}, [props.b]);
After each setCount()
, we will receive the most updated value of count
.