Build a 2x3 React Feed Grid from Static Data, Then from an API, and Explain Your Hooks

Build a small React view that shows a list of feed items, similar to posts in a social feed, in a fixed six-cell grid: two rows of three equal-width columns, one item per cell. Each feed item has three fields: | Field | Meaning | | --- | --- | | `feed_id` | Unique identifier of the item | | `feed_text` | The text of the post | | `createdAt` | When the item was created | The interviewer asks you to build it in two steps and then asks about the React hooks you use. The coding portion is about 20 minutes, in your own local IDE with every AI feature switched off and your screen shared, so a working version matters more than polish. ### Constraints and Clarifications - The grid has exactly six cells, arranged as two rows of three equal-width columns. - The fetch endpoint is supplied by the interviewer. Its URL, response shape and paging were not reported; unless told otherwise, assume it returns a JSON array of feed items. - The format of `createdAt` was not reported. Ask, or assume an ISO 8601 string. ### Clarifying Questions - If more than six items come back, which six should be shown: the first six in response order, or the six newest by `createdAt`? - If fewer than six come back, should the empty cells stay visible so the two-by-three shape holds? - Should `createdAt` be displayed, and in what format? - Should long `feed_text` be clamped so every cell keeps the same height? - Plain CSS only, or is a styling library available? Must the grid keep three columns on narrow screens? ### Part 1 — Render the grid from static data Using a hard-coded array of feed items, render the six-cell grid with one item per cell. ```hint One container, two dimensions Rows and columns both matter here. Look for a CSS layout mode that lets the container declare its column structure once, instead of sizing each card by hand. ``` #### What This Part Should Cover - The split between a grid container component and a single feed card, and the props each one takes - CSS that yields three equal columns and two rows, and stays equal when the text is long - Stable list keys and sensible semantic markup - Behavior with fewer or more than six items ### Part 2 — Populate the grid from the API Replace the static array with data fetched from the provided endpoint, keeping the layout unchanged. ```hint Name the in-between states Between the first render and the response there is nothing to show, and the request can fail. Decide what the grid shows in each state, and make sure the request runs when it should rather than on every render. ``` #### Clarifying Questions for this Part - Fetch once when the view mounts, or refresh periodically? - What should the user see while the request is loading, and after it fails? #### What This Part Should Cover - Where the request is made and what triggers it - Loading, error and empty states, including HTTP error responses - Avoiding state updates from a response that arrives after unmount or after a newer request - Choosing and ordering the six items to display ### Part 3 — Which React hooks have you used, and how? The interviewer asks which React hooks you have used and how you use them. Start from the hooks in the code you just wrote, then widen out. ```hint Tie each hook to a problem For every hook you mention, be ready to say what problem it solved, in this component or elsewhere, and one way it is commonly misused. ``` #### What This Part Should Cover - State and effect hooks, dependency arrays and cleanup - Memoization and refs: when they help and when they only add noise - The rules of hooks, and extracting reusable logic into a custom hook ### What a Strong Answer Covers - A working static grid early, then data wiring that leaves the layout code untouched - Layout CSS that keeps the columns equal regardless of content - Complete request handling: HTTP errors, loading, empty results and cancellation - Hook explanations grounded in the candidate's own code, with real pitfalls - Sensible time management within a 20-minute coding slot ### Follow-up Questions - The endpoint becomes paginated and the user wants to see the next six items. How does your component change? - In development with React StrictMode, your effect runs twice on mount. What do you observe, and is your code still correct? - How would you test this component's loading, error and success states? - How would you make the grid collapse to a single column on a phone?