React UseEffect render infinite loop

Question

I seem to have an infinite loop in my code but I can't seem to see where, I usually see this if I am setting the state of something that is a dependency of useEffect but here the two variables (values / items) are completely seperate.

App.js

import React from 'react';
import './style.css';
import MyComponent from './MyComponent.js';

export default function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

MyComponent.js

import React, { useEffect, useState } from 'react';

const MyComponent = ({ values = [] }) => {

  console.log('MyComponent Reloaded');
  const [items, setItems] = useState();

  useEffect(() => {
    const loadItems = () => {
      //setItems([]);   //why does this cause infinite render loop?
    };

    loadItems();
  }, [values]);

  return <></>;
};

export default MyComponent;

Why does this cause a render loop?

I have an example build Here (Uncomment the commented line to begin render loop)

Your useEffect runs when you change values. You change values in that useEffect. — Konrad
– Konrad, Commented Aug 29, 2022 at 20:31
@KonradLinkowski Can you explain where I am changing values? The only place I set it is in the props — Christopher Townsend
– Christopher Townsend, Commented Aug 29, 2022 at 20:32
Oh sorry, I was wrong. You are creating new values in each render. Remember that [] !== [] so useEffect detect this a achange — Konrad
– Konrad, Commented Aug 29, 2022 at 20:33
So useState will cause a re-render, even if the state being changed isn't used in the output of the function? — Christopher Townsend
– Christopher Townsend, Commented Aug 29, 2022 at 20:40

BehRouz · Accepted Answer · 2022-08-29 20:57:14Z

1

You need to introduce the default values of the props the right way:

import React, { useEffect, useState } from 'react';

const MyComponent = ({ values }) => {
  console.log('MyComponent Reloaded');
  const [items, setItems] = useState();

  useEffect(() => {
    console.log(values)
    const loadItems = () => {
      setItems([]);
    };

    loadItems();
  }, [values]);

  return <></>;
};

MyComponent.defaultProps = {
  values: []
}

export default MyComponent;

answered Aug 29, 2022 at 20:57

BehRouz

1,3941 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

krishnaacharyaa · Accepted Answer · 2022-08-30 03:08:09Z

0

There are two possible bugs in the code:

According to your code, values variable is created every time, when checked with the previous values variable it is not same. So it causes infinite loop.
- To fix this use default props.
```
const MyComponent = ({ values }) => {
 ...

MyComponent.defaultProps = {
  values: []
}
```
As in your question,this line causes you the infinite loop
```
   //setItems([]);
```
- To overcome this
  
  Add items dependency along with values, so that both values are watched before re-rendering.
```
useEffect(() => {
console.log(values)
const loadItems = () => {
  setItems([]);
};

loadItems();
}, [values,items]);
```

answered Aug 30, 2022 at 3:08

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Collectives™ on Stack Overflow

React UseEffect render infinite loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related