I have a React Slider Component with Keen-Slider.

The Hook looks like this:

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);
      },
    }
)

so whenever the details of the Slider change, i set the opacity and z-index of my Component to the "new_opacities" (new_opacities is like which item is active. The active one gets the number 1 and the not active items 0).

The Component looks like this:

<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>

like this it works without bugging. But when i try to export the content to a different Component it gets rlly laggy because i have many re-renders, thats because my state "opacities" change a lot. I tried using React.memo but the new_opacities return [0, 0.1, 0.9] -> [0, 0.2, 0.8] -> [0, 0.3, 0.7] -> ... (so it changes step by step and not immediately to 1 or 0)! So the State always change the value.

This is how i want it to be:

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