Why does useEffect dependencies on destructed props cause maximum update exceeded?

I got the problem with following code:

function Test1(props) {
  const { ids = [] } = props;
  const [evenIds, setEvenIds] = useState<string[]>([]);

  useEffect(() => {
    const newEvenIds = ids.filter(id => id % 2 === 0);
    setEvenIds(newEvenIds);
  }, [ids])

  return (<span>hello</span>)
}

The code above uses the useEffect hook listening changes of props. When this component is used as <Test1 ids={[]}/>, everything seems to be fine. However, if it is used as <Test1 /> without passing props, the console repeatedly reports the error maximum update depth exceeded and the browser crashes finally.

I guess that the variable ids with initial value undefined, is assigned [], which causes useEffect to run. But how does that leads to the repeated error?

When ids is passed as a prop, the only time the local ids variable will have had its reference changed will be when the prop changes.

When it's not passed as a prop, the default assignment, since it runs inside the function, every time the function runs, produces a new empty array every time. So, if the function component updates once, it'll try to continue updating forever because the default empty array reference keeps changing.

One way to fix this would be to put the empty array outside the component. (Just make sure not to mutate, as always in React)

const emptyArr = [];
function Test1(props) {
  const { ids = emptyArr } = props;
  const [evenIds, setEvenIds] = useState<string[]>([]);

  useEffect(() => {
    const newEvenIds = ids.filter(id => id % 2 === 0);
    setEvenIds(newEvenIds);
  }, [ids])

  return (<span>hello</span>)
}

State shouldn't be duplicated in more than one place though. useMemo would be more appropriate than a separate state and useEffect IMO.

const emptyArr = [];
function Test1(props) {
  const { ids = emptyArr } = props;
  const evenIds = useMemo(() => ids.filter(id => id % 2 === 0), [ids]);
  return (<span>hello</span>)
}