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)

Answer 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;

Answer 2

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]);