about the react hook useEffect deps array - react-hooks

Question

const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
useEffect(() => {
getApiValues();
}, []);
useEffect(() => {
//problem is when enter this page from another, sometimes value1 is 0 ,but actually is not 0 .
setApiValues(value1,value2);
}, [value1,value2]);
const getApiValue1= () => {
const info = {
corpid:'corpid',
userid:'userid'
};
fetch(`url`,{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
credentials: 'include',
body: JSON.stringify(info)
})
.then(res => res.json())
.then(json => {
if(json.result === 'succ') {
....
setvalue1(value1);
setvalue2(value2);
}
});
};
const setApiValues = () => {
.....
}
the problem is that i get data from getApiValue1 and then 2 setState , sometiems ,not everytime , value1 is set to 0 , actually is not 0 .
when setvalue2(value2) happen , value2 changed , it will trigger useEffect ,why get value1 is 0 ?
and how to fix this ?

Answer 1

It's not a good practice to use useEffect as a way to control the flow of your data, more about this here. Why don't you just call setApiValues instead of setvalue1 and setvalue2?

Answer 2

If you set the values in two separate setValueX calls, the Effect may be run for both updates as well. If you want to set both values and only run the Effect once, consider putting them in a single state object and updating them together, eg.
const [values, setValues] = useState({ value1: 0, value2: 0 })
// fetch and set values
const fetchValues = async () => {
//...
const res = await fetch('something', options)
const { value1, value2 } = await res.json()
setValues({ value1, value2 })
}
// run fetch on mount
useEffect(fetchValues, [])