I have code not show me the result after do action
useEffect(() => {
axios.get(`https://ahmed-radi-bank-system-api.herokuapp.com/all`)
.then(response => (setTransaction(response.data)))
},[])
if add transaction to useEffect I get a lot of rendering as you can see in console
useEffect(() => {
axios.get(`https://ahmed-radi-bank-system-api.herokuapp.com/all`)
.then(response => (setTransaction(response.data)))
},[transaction])
the solution is: in useEffect if you put an object as a dependency you must specify one prop from this object to make useEffect stop the infinity loop
example of Infinite loop
useEffect(() => {
// Infinite loop!
setObject({
...object,
prop: 'newValue'
})
}, [object]);
example of No infinite loop
useEffect(() => {
// No infinite loop
setObject({
...object,
prop: 'newValue'
})
}, [object.whenToUpdateProp]);
reference: https://dmitripavlutin.com/react-useeffect-infinite-loop/
Pass an argument to the useEffect array, is your case the transaction variable. When it changes the data should rerender.
Check the documentations: https://reactjs.org/docs/hooks-reference.html#useeffect