score:5
this is because you passed an array containing your products
state, rather than an empty array, which will fire useeffect
on state change (for products
state specifically). try changing your code to an empty array:
useeffect(() => {
const getproducts = async () => {
return await axios
.get('/getallproducts')
.then((response) => {
setproducts(response.data);
console.log(products);
})
.catch((e) => {
console.log(e);
});
};
getproducts();
}, []);
as @skyboyer mentioned below, it is good to note that state is not updated in a synchronous manner. therefor, console.log(products)
will not reflect an accurate value for your state when useeffect
runs.
it is okay to use multiple useeffect
hooks. if you would like to view your updated state in the console, or do some other work with it, you could add another useeffect
hook and pass your state into the array:
useeffect(() => {
console.log(products);
}, [products]);
score:1
since products
is in the useeffect
dependency array, it is going to run every time there are changes made to the products
state. getproducts()
runs setproducts
which then in turn is going to trigger the use effect again. using an empty array in the useeffect
will tell it to only run when the component is mounted.
like this:
useeffect(() => {
const getproducts = async () => {
return await axios
.get('/getallproducts')
.then((response) => {
setproducts(response.data);
console.log(products);
})
.catch((e) => {
console.log(e);
});
};
getproducts();
}, []);
Source: stackoverflow.com
Related Query
- React useEffect with property as dependency makes infinite loop
- Infinite useEffect loop when using Redux with React Hooks
- React- Issue with infinite loop in useEffect
- React with Inversify makes useEffect infinite loop
- React Hook UseEffect in combination with Firebase creating infinite loop
- Infinite loop error in React JS with useEffect and useState
- React Hook Function in UseEffect with infinite loop
- Infinite loop with useEffect in React
- Infinite loop useEffect with useSelector
- Prevent infinite loop when updating state via React useEffect Hook
- React useEffect infinite loop fetch data axios
- React useEffect forces me to add dependencies that trigger an infinite loop
- Header flickering and freezing issue with material table (implemented with react window + react window infinite loader)
- React Hooks infinite loop with Array
- React useEffect does infinite loop
- Infinite loop when working with react and react-firebase-hooks
- Why does this create an infinite render loop with React hooks?
- React useEffect Infinite loop when fetching from api
- React redux reducer as UseEffect dependency causes infinite loop
- Infinity loop using useState with useEffect in React
- How to do fetch with React Hooks; ESLint enforcing `exhaustive-deps` rule, which causes infinite loop
- React axios get request without resulting in infinite loop using useEffect
- UseEffect and useCallback still causes infinite loop in react project
- How to prevent infinite loop in my React code when using setState inside useEffect
- React useState with an empty object causes an infinite loop
- React infinite loop in useEffect() with reducer
- useEffect stuck in infinite loop with useContext
- React Hook useEffect issue with setState
- react hook useEffect infinite loop despite dependency list
- React Typescript Infinite loop with render from function
More Query from same tag
- How to create a dynamic HTML table with Firebase?
- google-map-react marker onclick not working
- How to bypass NextAuth when given an external access token
- Switch animation in Expansion panel not working
- React/Redux and JavaScript Promise.all
- BrowserRouter not working in create-nw-react-app
- How to map a JSON array to a List in ReactJS?
- Why do I get this Eslint warning - Expected 'this' to be used by class method in my special case
- jest + enzyme: TypeError: Cannot read property 'htmlparser2' of undefined
- Error on exporting React Components in index.js file
- Component rendering before props are updated - React Redux
- How to filter through cards based on the value using onChange when selected in a dropdown
- Switch child components by state
- Unable to change dropdown value in React child component
- Sort data in react table - not alphabitacelly, but specific order
- Unable to setup semantic-ui-react in a React project
- React useEffect and useState returns a number instead of an object
- cannot destructure property as it is undefined error
- How to choose between class methods and properties in react?
- ReactJS, react-router: Ecxclude Navigation Menu in Login Page
- Easy way to check if array of objects exists in array of objects before setting state React JS
- Passing data between Router Components in React
- Why in creating validation in Formik I have an error?
- Unable to change selected option background color | React Select
- How to load a react component written in JSX code from my Javascript code
- Properly defining environment variables in Cloud Run for my React App
- Next.js : Refresh page after modifying a file, without rerunning 'npm run'
- Fetching from API endpoint with React returns value undefined
- Sorting numbers cast as strings in react
- Request failed with status code 500 React Native