Product List & Cart in React, Part 1: Loading Data with fetch

Starting from an empty folder, we create a new React project with Vite, strip out the default boilerplate, and add a product list as a real JSON file. First attempt: a plain array and fetch, no state — the data comes back, but the page never updates, because nothing told React to render again after the network call finished late. Switching to state fixes that, but immediately causes a new problem: calling fetch directly during render triggers an infinite loop of requests, since every state update triggers another render, which triggers another fetch. We fix that with useEffect and an empty dependency array, so the fetch runs exactly once, then confirm the data really is external by editing the JSON file directly and refreshing. Playlist:    • Building Things in React