I used react-simple-image-slider for image slider on my website, but after i resize the browser window the application gets stucked.
The main Aim is to make the react-simple-image-slider responsive.
The below is the code.
import './App.css'; import {useLayoutEffect, useState } from 'react'; import SimpleImageSlider from 'react-simple-image-slider'; function App() { const [widthAndHeight, setwidthAndHeight] = useState([window.innerWidth, 600]); useLayoutEffect ( ()=> { function updateTheWidthAndHeight() { setwidthAndHeight([window.innerWidth, 600]); } window.addEventListener('resize', ()=>{ updateTheWidthAndHeight(); }) }) const images = [ { url: "logos/ethiopia.png" }, { url: "logos/favicon.ico" }, { url: "logos/gear.png" }, { url: "logos/gear.jpg" } ]; return ( <div> <SimpleImageSlider style={{ margin: '0 auto', marginTop: '0px'}} className="slider" width={widthAndHeight[0]} height={widthAndHeight[1]} slideDuration={1} loop={true} autoPlay={true} images={images} showBullets={false} showNavs={true} /> </div> ); } export default App;
Advertisement
Answer
You forgot a dependency list for useLayoutEffect
so it’s adding an event listener on every render. Add an empty list for one-time execution:
useLayoutEffect(() => { function updateTheWidthAndHeight() { setwidthAndHeight([window.innerWidth, 600]); } window.addEventListener("resize", () => { updateTheWidthAndHeight(); }); }, []);