Hay dos recursos externos y un archivo JS personalizado para cargar en el componente. El archivo JS personalizado debe ejecutarse solo después de los recursos externos. Sin embargo, en realidad no funciona de esta manera aunque se haya activado la palabra clave diferir . Parece que el archivo JS personalizado se ejecuta primero. Me pregunto qué va mal con este enfoque.

 import React, { Fragment, useEffect, useRef } from "react"; import "./Home.css"; import { Helmet, HelmetProvider } from 'react-helmet-async'; import ShowCase from "./ShowCase"; import BookCarousel from "./BookCarousel"; import Testimonial from "./Testimonial"; import SignUp from "./SignUp"; import Contact from "./Contact"; const Home = () => { return ( <HelmetProvider> <Helmet> <script type="text/javascript" defer src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <script type="text/javascript" defer src="https://unpkg.com/scrollreveal" ></script> <script type="text/javascript" defer src="./carousel.js"></script> </Helmet> <ShowCase /> <BookCarousel /> <Testimonial /> <SignUp /> <Contact /> </HelmetProvider> ); }; export default Home;