Effects and data fetching

useEffect keeps a component in step with something outside React, like a network request, a timer or a subscription. An effect runs after the component renders. It runs again when a value in its dependency array changes.

Its cleanup function runs before the next run and when the component is removed. When fetching data, show a loading state and an error state. Also ignore or cancel a response that arrives after the inputs changed.

Otherwise a slow old search can overwrite a newer one. Many effects are not needed at all. If you can calculate a value from props or state, calculate it during render.

Once you have fetched data by hand, try a library such as TanStack Query. It handles caching, retries and refetching, and most real apps use it against their own API.