Estoy usando React para cargar y renderizar imágenes como elementos de un componente de carrusel. Estoy usando el useState para configurar el elemento del carrusel actualmente activo, y cuando un usuario hace clic en la flecha siguiente o atrás, uso la función de set del useState para actualizar el elemento activo. Luego uso animaciones CSS para animar la rotación de los elementos del carrusel.

Sin embargo, con esta implementación, el componente vuelve a solicitar el activo de la imagen cada vez que cambia el elemento activo del carrusel, lo que provoca un destello en la imagen.

Así es como está configurado actualmente para manejar la animación del carrusel.

 // Component const Carousel = ({ data }: Props) => { const [activeItem, setActiveItem] = useState(0) const back = () => { const newActive = activeItem - 1 setActiveItem(newActive < 0 ? slice.items.length - 1 : newActive) } const next = () => { const newActive = activeItem + 1 setActiveItem(newActive % slice.items.length) } return ( <section> <div className="carousel-container"> <button onClick={back}>Back</button> <div className="carousel"> items.forEach((item, i) => { let itemClass = "slide" if (i === activeItem-1) itemClass += " prev" else if (i === activeItem) itemClass += " active" else if (i === activeItem+1) itemClass += " next" else itemClass += " hidden" return <CarouselItem item={item} className={itemClass} /> }) </div> <button onClick={next}>Next</button> </div> </section> ) } // SCSS .carousel { .item { transition: transform 0.4s cubic-bezier(0.28, 0.11, 0.3, 1.01), box-shadow 0.4s cubic-bezier(0.28, 0.11, 0.3, 1.01); &.prev { z-index: 0; transform: translate3d(-35%, 0, -30px); } &.active { z-index: 1; transform: translate3d(0%, 0, 0px); } &.next { z-index: 0; transform: translate3d(35%, 0, -30px); } &.hidden { z-index: -1; transform: translate3d(0, 0, -50px); } } }

¿Cómo puedo hacer que este componente actualice su estado (es decir, anime la rotación del carrusel) sin volver a solicitar las imágenes ya cargadas?