hard20 pts · first answer countsreact-hooksdebugging

Effect that fetches forever

This component sends requests in an endless loop. Why?

function Results({ page }) {
  const [data, setData] = useState([])
  const options = { page, size: 20 }
  useEffect(() => {
    fetchResults(options).then(setData)
  }, [options])
  return <List items={data} />
}

A.fetchResults returns a promise, and effects cannot use promisesB.setData must be called inside a setTimeout to avoid loopsC.The effect is missing page in its dependency arrayD.options is a new object on every render, so the effect runs again after each setData render

← Every context consumer re-renders Tooltip flashes in the wrong place →