The Effect That Never Stops in JavaScript

The Category select needs the shop's category names, and the shop's API lists them at GET /api/categories. Asking the API touches something outside React, so it is a job for an effect, which runs after the draw. But an effect that sets state can trap the page in a loop. Setting state makes React draw again, and an effect with no dependency array runs after every draw.

Here is the smallest loop, on another value:

useEffect(() => {
  setViews(views + 1);
});

It runs after the draw and changes views, so React draws again, so it runs again, without end. When the effect fetches, every round is one more request: the check stops the page after 8 rounds and says the page keeps asking the API. The fix is the dependency array. [] means "after the first draw only": nothing in it can change.

Only put things in the array that change when the effect should run again. React compares each one with the last draw's, and an array or object made fresh is new every time, even with the same contents. With const filters = { category: "kitchen" }; written in the component, [filters] means "after every draw" again. That is also why categories can't be the effect's own dependency: each answer from response.json() is a brand-new array.

Today the select has only the option All, and choosing "kitchen" fails: Value "kitchen" not found in options. Your page must show:

> open the page
  request: GET /api/categories -> 200
  request: GET /api/products -> 200
  select "Category": "All" of [All, home, kitchen, office]
> choose "kitchen" in "Category"
  request: GET /api/products?category=kitchen -> 200
  text: 2 products  (Mug $12, Teapot $22)

Your task: in src/App.jsx, add a categories state that starts empty, draw one <option> per name in the select, and load the names with an effect whose array is [], so the page asks for them exactly once.

Assignment
Follow the Coding Tutorial to load the category names once, in an effect with [], and list them in the Category select.

Hint
Build the effect from the outside in: the useEffect with [], the async function inside it, then the call. A function nobody calls sends no request.