Intenté actualizar el estado de carga a false después de obtener datos de la base de datos. ¿Hay algo que me estoy perdiendo?

El error ocurrió en la función setLoading dentro useEffect .

 const SingleProduct = ({ productName }) => { const [product, setProduct] = useState([]); const [loading, setLoading] = useState(true); // The line of code helps to convert hyphenated text to a spaced out text for database reading. const convertedProductName = convertToDefaultProductName(productName); useEffect(() => { const getProduct = async () => { try { const result = await publicRequest.get( `products/find/${convertedProductName}` ); setProduct(result.data); setLoading(false); // BIG BUG IN THIS LINE. } catch (err) { setLoading(false); } }; getProduct(); }, [productName]); console.log(product, loading); const reOrderedProduct = sortSimilarProduct(product); return ( <Container loading={loading}> {loading ? ( <CircularProgress size="8rem" /> ) : ( <SingleProductDetails productName={convertedProductName} productDetails={reOrderedProduct} /> )} </Container> ); };

Aquí está el componente principal del componente SingleProduct

 import React from 'react'; import Navbar from '../components/Navbar/Navbar'; import PageTitle from '../components/PageTitle/PageTitle'; import SingleProduct from '../components/SingleProduct/SingleProduct'; import Footer from '../components/Footer/Footer'; import Announcement from "../components/Announcement/Announcement"; import { useParams } from 'react-router-dom'; import { splitAndSpace } from '../usefulFunc'; const Product = () => { const { productName } = useParams(); return( <> <Announcement /> <Navbar /> <PageTitle title={splitAndSpace(productName, "-")} pageLocation={"Home | Shop | ... | " + productName} params={productName}/> <SingleProduct productName={productName}/> <Footer borderTop/> </> ); }; export default Product;