How to organize the Category Page component?

Question

React

Good morning, there is a component "Product category page"
in useEffect I do fetch /api/category/:category , which returns:

category information, title, h1, product list, etc.

{
  title: 'Мобильные телефоны',
  h1: 'Мобильные телефоны в Уфе',
  products: [
    { ... },
    { ... },
    ...
  ],
  ...
}

CategoryPage component:

const CategoryPage = ({ categorySlug }) => {
  const [page, setPage] = useState(0);
  useEffect( () => {
    fetch(`/api/category/${categorySlug}`)
    .then( (res) => res.json())
    .then( (res) => setPage(res));
  }, []);

  return (
  <>
    <h1>{page.h1}</h1>
    <ProductListContainer products={page.products}  categorySlug={categorySlug} />
  </>
  );
};

The ProductListContainer component is responsible for the products, and here it is just a container, it receives the initial list of products at the input, and then it works with the api itself and passes everything to a simple component that displays everything.

ProductListContainer component

const ProductListContainer = ({ products, categorySlug }) => {
  const [productsList, setProducts] = useState(products); // Не уверен что так можно.
  useEffect( () => {
    if(productsList.length === 0) {
      fetch(`/category/${categorySlug}/products`)
      .then( (res) => res.json())
      .then( (res) => setProducts(res));
    }
  }
  , []);

  const loadProducts = ({ page, count }) => {
    fetch(`/api/category/${categorySlug}/products?page=${page}&count=${count}`)
    .then( (res) => res.json())
    .then( (res) => setProducts(res));
  };
  
  return <ProductList products={productsList} loadProducts={loadProducts}/>;
};

1. Have I organized the page component correctly?
2. Is it correct that the "category page" component is a normal component (although it has a state and logic), Shouldn't it be called a "container"? (it is not reused)
3. Is there anything wrong with the fact that I pass the initial data to the ProductListContainer, and then it works itself, referring to another url ?
4. Can this kind of design be used? :

const MyComponent = ( props ) => {
  const [count, setCount] = useState(props.count); // записывать в state из props
}

As I understand it, redux is not needed here, because there are no complex connections, just a container - a component, and a common store is not needed, am I right?

PS Does anyone have an example of a full-fledged react + redux application on github? I tried to find it, but almost all of it is littered with very primitive ToDo-style applications, and I couldn’t find something more complicated, either old, or unfinished, or todo, I would be very grateful if someone shares the link

Answer 1

Since they asked:
1. What does "correctly" mean? it's normal for you to organize
2. to call something a container or not is your own business, depending on how you decide to organize the code for yourself. there are no requirements and generally accepted standards that cannot be violated in this regard.
3. in the general case - it is better to load the data somewhere in one place. But there are exceptions, whether it's bad with you or not here - I don't know. Maybe there are fewer requests to the server or better code - then it's not bad. If you just didn't know how to organize the code and copy-pasted the download into two places, then it's bad.
4. you can
x. If there is no need for an editor, then yes, it is not needed. If the code starts to get complicated, some application state will be required.
PS. you can look at apollo-client, it has redax inside like. But you hardly have to write such a library plan.