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:

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.

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.

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.

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