React Effect dependecy with two useState values and Effect Refiring - reactjs

Question

Following is my code
const [accountUsers, setAccountUsers] = useState([]);
const [listLoading, setListLoading] = useState(true);
const [totalAccountUsers, setTotalAccountUsers] = useState(0);
const getAccountUserList = useCallback(
async (page = 0, pageSize = 10) => {
console.log('Kitne users hain??==', accountUsers.length);
if (
// TODO: Move this logic to action for reusability
accountUsers.length < (page + 1) * pageSize &&
(accountUsers.length < totalAccountUsers || accountUsers.length === 0)
) {
console.log('inside if condition');
console.log(' Total Account users=', totalAccountUsers);
console.log(
'first condiont=',
' accountUsers.length < (page + 1) * pageSize ',
accountUsers.length < (page + 1) * pageSize,
' AND'
);
console.log(
'second one condition',
' accountUsers.length < totalAccountUsers =',
accountUsers.length < totalAccountUsers,
' OR ',
'second two condition',
' accountUsers.length === 0',
accountUsers.length === 0
);
setListLoading(true);
const data = await getAccountUsers(id, page + 1, pageSize);
setAccountUsers((users) => users.concat(data.data.data.results));
setTotalAccountUsers(data.data.data.total);
setListLoading(false);
}
},
[accountUsers, totalAccountUsers, id]
);
const refetchUsers = useCallback(() => {
setAccountUsers([]);
setTotalAccountUsers(0);
}, []);
useEffect(() => {
getAccountUserList();
}, [getAccountUserList]);
return (
<>
<Button onClick={() => refetchUsers()}>Refetch</Button>
<Button onClick={async ()=> await delete(id); refetchUsers()> Delete </Button>
</>
)
My refetch function works fine when called individually. But when an async function is involved the callback is called twice. I feel in the refetch functions two setStates are causing it to call the callback twices with the help of effect.
Why does that happen and what's the work around?
IF refetch is called before any async operation it works perfectly fine though. Is it some issue with react batching the state updates before firing effects.

Answer 1

Your code is effectively as below by condensing your dependency tree (and ignoring some unrelated stuff):
const Home = () => {
const [accountUsers, setAccountUsers] = useState<number[]>([]);
const [totalAccountUsers, setTotalAccountUsers] = useState(0);
React.useEffect(() => {
const getAccountUserList = async () => {
const data = await Promise.resolve({results: [1, 2, 3]});
setAccountUsers((users) => users.concat(data.results));
setTotalAccountUsers(data.results.length);
};
getAccountUserList();
},
[accountUsers, totalAccountUsers]);
const refetchUsers = () => {
setAccountUsers([]);
setTotalAccountUsers(0);
};
return (
<>
<button onClick={() => refetchUsers()}>Refetch</button>
</>
);
};
We can easily spot the issue here - infinite rerendering caused by the useEffect hook. You are seeing the api is called twice likely because (and luckily) it has finished reading all data and the if condition in your code stops further state updating.
Some personal suggestions:
Avoid useCallback from the beginning. It's an optimization, and we should start with correct core functionality not optimization.
For user events, try to avoid triggering side effects using useEffect - it'll likely require additional state update and leads to unnecessary rerendering. Do that in the event handler directly.
Use useEffect without dependency (one time) for initial data loading.
Try to avoid dependency "hierarchy" - For example in your original case useEffect depends on getAccountUserList which depends on other state objects. This kind of hierarchy makes it harder to read the code and can lead to bugs hard to spot. Instead try to structure your code so that they depend on state directly.
The below code (again, simplified) should work for your scenario:
const Home = () => {
const [accountUsers, setAccountUsers] = useState<number[]>([]);
const [totalAccountUsers, setTotalAccountUsers] = useState(0);
const getAccountUserList = async () => {
const data = await Promise.resolve({results: [1, 2, 3]});
setAccountUsers((users) => users.concat(data.results));
setTotalAccountUsers(data.results.length);
};
React.useEffect(() => {
getAccountUserList();
}, []);
const refetchUsers = () => {
setAccountUsers([]);
setTotalAccountUsers(0);
getAccountUserList();
};
return (
<>
<button onClick={() => refetchUsers()}>Refetch</button>
</>
);
};