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

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>)
}