event listener resize window not working on first expand only

user_2150879 0
Viewed 421

I'm trying to make the side buttons in the carousel(3rd slide) change based on the inner slide container size resizing with media query. I've got it working except for one bug. When I resize back from smaller responsive, the button doesn't change, until I resize again (smaller or bigger but on the same media query)

This is the block of code used in the file src/Components/AboutComponents/AboutCarousel.js:

  useLayoutEffect(() => {
    if (slideIndex === slideIndexes.fun) {
      const handleResize = debounce(() => {
        setIsScreenResized(!isScreenResized);
        console.log('isScreenResized changed =', isScreenResized);
        console.log('---------------------')
      }, 100);

      window.addEventListener('resize', handleResize, false);

      return () => {
        window.removeEventListener('resize', handleResize, false);
      }
    }
  },[slideIndex, slideIndexes, hobbyTabIdSelected, isScreenResized, setIsScreenResized]);

See the following use case below to reproduce the issue:

enter image description here

reactjs
1 Answers

The issue was the transition had a timout of 1 second set in the index.css for all which would include the height resize(being read by the eventListener):

.div-about-carousel-slide-container {
  ...
  transition: all 1000ms ease-in-out; /* double size of about-carousel-slide-hide */
}

Therefor the content list would not complete the resize until after 1 second, and the debouncer was set to 0.1second (to read before the content resized).

The Fix:

Since we want to keep slide transition to keep the opacity flash, we change it to the following:

.div-about-carousel-slide-container {
  ...
  transition: opacity 1000ms ease-in-out; /* double size of about-carousel-slide-hide */
}

(Note: I'm probably going to refer to this question in the feature on why setting transition to all is a bad default habbit)

user_21508790
Related