UseEffect Infinite Loop , with axios - reactjs

Question

Hi i am using Useeffect in reactt with axios to display objects from the database ,
I faced an infinite loop in the useeffect which I cannot display the objects on the browser a lot of time ,
but spring boot server still infinite call and also on the console there is an infinite objects displayed when I print the data from useeffect.
here is my code and hope u can suggest a solution for the prob;em
const [filterKeywords, setfilterKeywords] = useState([]);
const [companies, setCompanies] = useState([]);
useEffect(() => {
axios.get(`/api/users/allCompanies`)
.then(res => {
setCompanies(res.data);
})
});
and I pass them to companies component
<Companies
keywords={filterKeywords}
data={companies}
setKeywords={addFilterKeywords}
/>
then pass them to company component
return (
<div className="jobs">
{(filteredData.map(d => {
return <Company key={d.id} data={d} setkeywords={setKeywords} />
}))}
</div>
)

Answer 1

Change your useEffect code to this.
useEffect(() => {
axios.get(`/api/users/allCompanies`)
.then(res => {
setCompanies(res.data);
})
},[]);

Answer 2

Add Empty dependencies ... like this at the end
useEffect(() => {
axios.get(`/api/users/allCompanies`)
.then(res => {
setCompanies(res.data);
})
},[]);

Answer 3

You do not have any callback in your useEffect that's why it goes to do infinity.
You can add array like this [] or you can add callback trigger in your array then you will not have that problem anymore
useEffect(() => {
axios.get(`/api/users/allCompanies`)
.then(res => {
setCompanies(res.data);
})
},[]);

Answer 4

Here is what you need to do.
const [filterKeywords, setfilterKeywords] = useState([]);
const [companies, setCompanies] = useState([]);
useEffect(async () => {
await axios.get(`/api/users/allCompanies`)
.then(res => {
setCompanies(res.data);
})
},[]);
When you are calling an api you should use async await, but that not the cause of the inifinity loop you was missing []
Option 2:
const [filterKeywords, setfilterKeywords] = useState([]);
const [companies, setCompanies] = useState([]);
useEffect(() => {
(async ()=>{
const {data} = await axios.get(`/api/users/allCompanies`)
setCompanies(data);
})();
},[]);