Prośba o ocenę komponentu Reactowego (pobieranie danych z bazy)

Cześć. Uczę się Reacta, obecnie robię sklep "do szuflady". Mam komponent łączący się z endpointem z NodeJS, który z kolei pobiera dane z MongoDB. W moim reactowym komponencie wyświetlane są produkty w formie divów zawierających "img", którego src zapisane jest w bazie danych oraz "p" zawierający cenę produktu. Każdy produkt ma też właściwość "type" np. "jacket", na podstawie której produkt przydzielany jest do diva zawierającego produkty danego typu - np. div z klasą "jacket", zawiera wszystkie itemy z bazy mające typ "jacket". Wszystkie produkty mam w bazie danych w tym samym miejscu, nie mam podkategorii, tylko właściwość "type", żeby pobrać wszystko jednym requestem(czy to dobra praktyka?). Poniżej zamieszczam mój kod, robi wszystko o czym wspomniałem. Jak wspominałem na początku, jestem początkujący i chciałbym się dowiedzieć, czy da się to zrobić lepiej/łatwiej/bardziej optymalnie. Dziękuję, że poświęcacie mi swój cenny czas i pozdrawiam. :)

React:

Node:

Mongo:

W formie tekstu:

import React, { useEffect, useState } from "react";
import axios from "axios";

const ShopPage = () => {
  const [productsList, setProductsList] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:5000/api/products-page/products-list")
      .then((response) => setProductsList(response.data));
  }, []);

  useEffect(() => {
    const products = document.querySelectorAll(".product");

    products.forEach((product) =>
      document.querySelector("." + product.id).appendChild(product)
    );
  });
  return (
    <>
      {productsList ? (
        productsList.map((product, key) => (
          <div className="product" id={product.type} key={key}>
            <img src={product.link} />
            <p>{product.price}</p>
          </div>
        ))
      ) : (
        <p>error</p>
      )}

      <div className="jacket"></div>
      <div className="jeans"></div>
      <div className="purse"></div>
      <div className="shoes"></div>
      <div className="tshirt"></div>
    </>
  );
};

export default ShopPage;

const express = require("express");
const router = express.Router();
const Product_Model = require("../../models/product.model");

router.route("/products-list").get((req, res) => {
  Product_Model.find()
    .then((products) => res.json(products))
    .then((products) => console.log(products))
    .catch((err) => res.status(400).json("Error: " + err));
});

module.exports = router;

AppendChild? Pozbądź się tego

Cały ten drugi useEffect jest do pozbycia się, w Reacie bardzo bardzo rzadko operuje się bezposrednio na drzewie dokumentu.