Katkat
Back

Load and Display a React List with useEffect

xAIFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSoftware Engineering Fundamentals

Last updated

Load a React list with useEffect while handling endpoint changes, cleanup, stale responses, HTTP and schema errors, stable keys, and user-visible states.

Implement a React component that uses useEffect to load and display a list.

Constraints & Assumptions

The reported task names useEffect and a list but does not provide an endpoint. For this practice version, receive an endpoint prop that returns a JSON array of {id,label} objects with unique string IDs. Display loading, empty, success, and error states. When the endpoint changes, an old response must not replace the new endpoint's state.

Clarifying Questions

Who owns fetching and caching? What should happen while switching endpoints? Can the request be canceled? How does the component behave on unmount?

Follow-up questions

  • Why should the effect callback itself not be async? What can development effect setup/cleanup cycles reveal? How would you add retries or share results among components?