Why my screen is flashing when i call the pros function - Reactjs - reactjs

Question

am making a slider, when i click on an item to slide to the second item, the screen flashs when the function is called ( the func that changes the items )
This comes exactly when clickAction(); is called.
Here is the demo : https://gfycat.com/ultimatetiredequestrian
PS: the click is handled in another file, here is some code :
const VerticalCarousel = ({ clickActionTransfer }) => {
.
..
...
<button
data-glitch={item.type}
type="button"
onClick={clickActionTransfer}
key={i}>
CLICK
{item.type}
</button>
};
This is my <SLider/> :
import React, { useState, useEffect } from "react";
import VerticalCarousel from "./carousel/VerticalCarousel";
const Slider = ({ getData, idd, clickAction, children }) => {
const [dataSlider, setDataSlider] = useState([]);
const [displayTitleState, setDisplayTitleState] = useState(true);
const [displayCarouselState, setDisplayCarouselState] = useState(true);
const [currentIndex, setCurrentIndex] = useState(0);
const [length, setLength] = useState(children.length);
const handleSlideClick = () => {
if (currentIndex < length - 1) {
setCurrentIndex((prevState) => prevState + 1);
}
setDisplayCarouselState(false);
setTimeout(() => {
setDisplayTitleState(false);
clickAction();
}, 1000);
setTimeout(() => {
setDisplayTitleState(true);
setDisplayCarouselState(true);
}, 2600);
};
useEffect(() => {
setLength(children.length);
setDataSlider(getData);
}, [getData, children]);
return (
<div className="slider__container">
{dataSlider.map((i) => {
return (
idd === i.id && (
<div key={i.id}>
<div
style={{
transform: `translateX(-${currentIndex * 100}%)`,
display: "flex",
transition: "all .5s linear",
}}
>
{" "}
{children}{" "}
</div>
<div className="slider__content">
<div
className={
"slider__left " + (i.theme === "light" ? "light-theme" : "")
}
>
<div className="slider__progressBar">
{" "}
{i.progressBar.nb1}{" "}
<span className="slider__progressBar-lightTxt">
{" "}
{i.progressBar.nb1}
</span>{" "}
{i.progressBar.text}
</div>
<h1 className={displayTitleState ? "showTitle" : "hideTitle"}>
{" "}
{i.title}{" "}
</h1>
</div>
<div
className={`slider__right ${
displayCarouselState ? "showCarousel" : "hideCarousel"
} ${i.theme === "light" ? "light-theme" : ""}`}
>
<VerticalCarousel
data={i.slider}
clickActionTransfer={handleSlideClick}
/>
</div>
</div>
</div>
)
);
})}
</div>
);
};
export default Slider;
App.js :
import React, { useState, useEffect } from "react";
import Slider from "./Slider";
import "./App.scss";
function App() {
const [loadSlide, setLoadSlide] = useState(0);
const [data, setData] = useState([]);
const handleclick = () => {
setLoadSlide(loadSlide + 1);
};
useEffect(() => {
setLoadSlide((loadSlide) => loadSlide + 1);
fetch("/data.json")
.then((response) => response.json())
.then((json) => {
setData(json.lvmh.sliders);
});
}, []);
return (
<div className="App">
<div
className={
"slider " +
(loadSlide >= 1 &&
loadSlide <= data.length &&
loadSlide + 1 &&
`ifSlider`)
}
>
<>
{loadSlide >= 0 && loadSlide <= data.length && loadSlide + 1 && (
<Slider clickAction={handleclick} idd={loadSlide} getData={data}>
{data.map((img) => {
return (
<img className={"slider__bg---- "} src={img.img} alt="" />
);
})}
</Slider>
)}
</>
</div>
</div>
);
}
export default App;

Answer 1

I found it, i don't know why but the bug comes from the browser console when it's opened ! weird !