Async function runs continuously - reactjs

Question

I'm using the following code to fetch data from two different sources in react using hooks.
const [ permissionTree, setPermissionTree ] = useState([]);
const [ availablePermissionsInRole, setAvailablePermissionsInRole ] = useState<Permission[]>([]);
const getAllPermissions = (): void => {
getPermissionList()
.then(response => {
if (response.status === 200 && response.data && response.data instanceof Array) {
const permissionStringArray = response.data;
let permissionTree: Permission[] = [];
permissionTree = permissionStringArray.reduce((arr, path) => addPath(
path, path.resourcePath.replace(/^\/|\/$/g, "").split('/'), arr,
), []);
setPermissionTree(permissionTree);
}
})
.catch(error => {
//Handle Permission Retrieval Properly
})
}
/**
* Retrieve permissions for a given role if in Role edit mode.
*/
useEffect(() => {
if (isEdit && roleObject) {
getPermissionsForRole(roleObject.id)
.then(response => {
if (response.status === 200 && response.data instanceof Array) {
const permissionsArray: Permission[] = [];
response.data.forEach(permission => {
permissionsArray.push({
id: permission,
isChecked: false,
fullPath: permission
})
})
setAvailablePermissionsInRole(permissionsArray);
getAllPermissions();
}
})
.catch(error => {
//Handle Role Retrieval Properly
})
} else {
getAllPermissions();
}
}, [])
The first async call getPermissionsForRole returns a string array and the second getAllPermissions returns an array of objects which I then parse on to a util method to create a different array of objects.
With an empty array as the second argument in useEffect the continuous async call is stopped but when I check availablePermissionsInRole inside the getAllPermissions method, it's empty. When I pass availablePermissionsInRole as the second argument the continuous loop occurs.
What am I doing wrong in this code. Please guide me since I'm new to react hooks.

Answer 1

I found a solution for the infinite loop of the useEffect and since I pass the availablePermissionsInRole as the second argument, react look only at the array reference and treats it as a new array hence the infinite loop. As a fix for this I first passed the following as the argument.
availablePermissionsInRole.length
which will stay the same unless the backend sends a new array element. Then again the strings inside the array could change without the length being changed so I used the following as the arguement which fixes my issue.
availablePermissionsInRole.toString()
Which then changes if a new string is also retrieved.
Thank you all for the help but do point out if there is any errors in the approach I have used.