useEffect second argument infinity render - reactjs

Question

I'm calling a function (getEmployees(url)), inside a useEffect without a second argument.
I want to call the getEmployees(url) every time an employee is added.
As soon as I add an employee or error as a second argument, the useEffect re-renders infinitely.
Is this how its supposed to work?
import React, { useEffect, useState, useCallback } from 'react'
//
import EmployeeRecord from './EmployeeRecord'
const Employees = () => {
const [loading, setLoading] = useState(false);
const [employees, setEmployees] = useState([]);
const [error, setError] = useState({show: false, msg: ''});
//
const url = 'http://localhost:3001/';
//
// const fetchDrinks = useCallback( async () => {
const getEmployees = useCallback( async (url) => {
setLoading(true)
try {
const response = await fetch(url)
const data = await response.json()
if (data) {
setEmployees(data)
setError({ show: false, msg: '' })
} else {
setError({ show: true, msg: data.Error })
}
setLoading(false)
} catch (error) {
console.log(error)
}
}, []);
useEffect(() => {
getEmployees(url)
}, [])
console.log("11111111 from employee.js ")
if (loading){
return (
<div>
.....is loading
</div>
)
}
return (
<div>
<div className="addinfo-infomations">
<EmployeeRecord employees={employees}/>
</div>
</div>
)
}
export default Employees

Answer 1

The second argument of useEffect is a dependency list telling React to call your useEffect function again any time one of the dependencies changes.
If there are no dependencies ([]), it will just get run when the component mounts.
Right now, if you put employees as a dependency, it will change every time your employees array gets set. And, you can see that in your getEmployees function, you call setEmployees. That's how you end up in your loop:
useEffect -> getEmployees -> setEmployees -> (employees changes, triggering useEffect again)
In order to avoid this, you have to not form a loop, or short-circuit it somehow.
You say that you want to run getEmployees every time an employee is added, but there's no code from what you've shown dealing with adding an employee. So, I'm assuming maybe this happens on the server that you're polling? If so, you'll need to find some way to get a notification from the server -- it won't be a matter of just calling useEffect, because React will have no way to know that there's been an employee added. Or, your example is missing some relevant code.

Answer 2

call getEmployees cause employees and error change. If you add an employee or error as a second argument, it means useEffect will execute its callback when employees and error changed. As a result, useEffect will execute its callback when you call getEmployees. Then the callback of useEffect will call getEmployees. infinity happened.
I think if you want reload the empolyees, you can add a refresh button
const [refresh, setRefresh] = React.useState(true);
const doRefresh = React.useCallback(() => {
setRefresh(pre => !pre);
}, []);
useEffect(() => {
...
}, [refresh]);
return (
<div>
...
<button onClick={doRefresh}>reload</button>
</div>
)
or automattically reload
useEffect(() => {
let handle;
const task = () => {
getEmpolyees().then(() => {
handle = setTimeout(task, 1000)
});
}
task();
return () => {
handle && clearTimeout(handle);
}
}, [])

Answer 3

I feel like the employees that are added vs the data you get back from the fetch should be different and if they are different you need to separate them, in order for that to work the way you have it now. Adding another state for it would be enough, lets say we call it setData since you have it named data. You would now setData instead of employees that way the effect doesn't start an infinite loop and then update the effect with all of its dependencies and you'll have no prob.
const Employees = () => {
const [loading, setLoading] = useState(false);
const [employees, setEmployees] = useState([]);
const [data, setData] = useState();
const [error, setError] = useState({ show: false, msg: '' });
//
const url = 'http://localhost:3001/';
//
// const fetchDrinks = useCallback( async () => {
const getEmployees = useCallback(async url => {
setLoading(true);
try {
const response = await fetch(url);
const data = await response.json();
if (data) {
setData(data)
setError({ show: false, msg: '' })
} else {
setError({ show: true, msg: data.Error });
}
setLoading(false);
} catch (error) {
console.log(error);
}
}, []);
useEffect(() => {
url && getEmployees(url);
}, [url, employees, getEmployees]);
if (loading) {
return <div>.....is loading</div>;
}
return (
<div>
<div className="addinfo-infomations">
<EmployeeRecord employees={employees} data={data} />
</div>
</div>
);
};