Tengo un componente React Slider con Keen-Slider.

El gancho se ve así:

 const [opacities, setOpacities] = useState([]); const [sliderRef] = useKeenSlider( { slides: items.length, loop: true, detailsChanged(s) { const new_opacities = s.track.details.slides.map((slide) => slide.portion ); setOpacities(new_opacities); }, } )

así que cada vez que cambian los detalles del Control deslizante, configuro la opacidad y el índice z de mi Componente en "nuevas_opacidades" (las nuevas_opacidades son como qué elemento está activo. El activo obtiene el número 1 y los elementos no activos 0).

El componente se ve así:

 <div ref={sliderRef} className="keen-slider"> {items.map((item, index) => ( <div key={item.id} className="highlight-slide-container" style={{ opacity: opacities[index] }} > ... //content </div> ))} </div>

así funciona sin errores. Pero cuando trato de exportar el contenido a un Componente diferente, se vuelve muy lento porque tengo muchos renderizados, eso se debe a que las "opacidades" de mi estado cambian mucho. Intenté usar React.memo pero las nuevas_opacidades devuelven [0, 0.1, 0.9] -> [0, 0.2, 0.8] -> [0, 0.3, 0.7] -> ... (así que cambia paso a paso y no inmediatamente a 1 o 0)! Entonces el Estado siempre cambia el valor.

Así es como quiero que sea:

 <div ref={sliderRef} className="keen-slider"> {items.map((item, index) => ( <HighlightItem item={item} key={item.id} opacity={opacities[index]} /> ))} </div>