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;

CodePudding user response：

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

CodePudding user response：

I suggest you use useEffect instead of useLayoutEffect.
Maybe it will cause blocking visual updates.

Ref: https://reactjs.org/docs/hooks-reference.html#uselayouteffect

Hope this might help you.