API Search and Render Image
Problem statement
API Image Search is a question about integrating with a real external API under realistic conditions — handling loading states, error states, empty results, request cancellation when the user types new input, and rendering a responsive image grid with lazy loading. You'll see this pattern in image pickers, stock photo search, product image galleries, and any media-rich application.
Your task is to build a search interface that fetches images from an API (Unsplash or similar) as the user types, with a debounce to avoid excessive requests, cancels in-flight requests when a new search begins, handles all error and loading states gracefully, and renders the results in a responsive photo grid with hover effects showing the photographer's name.
Requirements & constraints
- Text input with a 400ms debounce before triggering a search
- Fetches images from a public API based on the search query
- Shows a loading spinner while the request is in progress
- Cancels the previous in-flight request when a new search is triggered
- Shows an empty state when no results are found
- Shows an error state if the fetch fails
- Renders images in a responsive grid with hover overlay showing metadata
- Images load lazily (loading='lazy')
How to approach API Search and Render Image
The strategy an interviewer expects you to reach for.
Problem Understanding This question has two concurrent advanced requirements: debouncing (prevent too many requests) and request cancellation (prevent stale responses from a previous query overwriting current results). They work at the same level — in the same useEffect, with the same cleanup function.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.