Issue with flickering scroll-snap in React component with useState

Question

Issue with flickering scroll-snap in React component with useState

I've encountered an unusual flickering glitch that only occurs when using the combination of:

css scroll-snap
useState
Sub-Components

But it's strange because the issue only arises when these three are combined!

https://i.sstatic.net/TvwyW.gif

Here is a simplified version of the problematic code:

carousel.js

import styles from './carousel.module.scss'
import { useEffect, useRef, useState } from 'react';

export default function Carousel() {
  const [currentScollPos, setCurrentScrollPos] = useState(0)
  const carouselRef = useRef()

  useEffect(() => {
    const carouselScrollUpdate = (e) => {
      setCurrentScrollPos(e.target.scrollLeft)
    }
    carouselRef?.current?.addEventListener('scroll', carouselScrollUpdate, { passive: true })
    return () => {
      carouselRef?.current?.removeEventListener('scroll', carouselScrollUpdate, { passive: true })
    }
  }, [carouselRef])

  const Slide = () => <div className={styles.carouselSlide}>Test Sub</div>
  
  return (
    <div className={styles.carouselInnerContainer} ref={carouselRef}>
      <div className={styles.carouselSlide}>Test1</div>
      <div className={styles.carouselSlide}>Test2</div>
      <div className={styles.carouselSlide}>Test3</div>
      <Slide />
    </div>
  )
}

carousel.module.scss

.carouselInnerContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carouselSlide {
  flex: 0 0 auto;
  width: 50%;
  margin-left: 2rem;
  background-color: aquamarine;
  height: 200px;
  scroll-snap-align: center;
}

The flickering issue will NOT occur if I do ONE of the following:

comment out:

setCurrentScrollPos(e.target.scrollLeft)

comment out: <Slide />
comment out: scroll-snap-align: center; in the CSS

Any insights on this peculiar behavior?

css reactjs react-hooks flicker scroll-snap

Answer 1

Answer №1

Encountering an issue arises when attempting to update the state each time the scroll position changes

const carouselScrollUpdate = (e) => {
  setCurrentScrollPos(e.target.scrollLeft)
}

Each call to setCurrentScrollPos triggers a re-render of your component, leading to flickering

Instead of updating the state constantly, consider setting the state only when the scrolling stops using setTimeout:

const carouselScrollUpdate = (e) => {      
    clearInterval(timer);
    timer = setTimeout(() => {
        console.log('set scroll')
        setCurrentScrollPos(e.target.scrollLeft)
    }, 500);      
}

Alternatively, you can set the state based on specific conditions:

const carouselScrollUpdate = (e) => {      
    if (isNearNextSlide()) {
      setCurrentScrollPos(e.target.scrollLeft)
    }         
}

const isNearNextSlide = () => {
   // add logic to determine satisfaction of conditions
}

Edit:

After conducting tests, I identified that the problem lies within the nested Slide component inside . I resolved this by relocating the Slide component outside the main Carousel component, avoiding unnecessary recreation of the Slide component during rendering

import styles from './carousel.module.scss'
import { useEffect, useRef, useState } from 'react';

const Slide = () => <div className={styles.carouselSlide}>Test Sub</div>

export default function Carousel() {
  const [currentScollPos, setCurrentScrollPos] = useState(0)
  const carouselRef = useRef()

  useEffect(() => {
    const carouselScrollUpdate = (e) => {
      setCurrentScrollPos(e.target.scrollLeft)
    }
    carouselRef?.current?.addEventListener('scroll', carouselScrollUpdate, { passive: true })
    return () => {
      carouselRef?.current?.removeEventListener('scroll', carouselScrollUpdate, { passive: true })
    }
  }, [carouselRef])
      
  return (
    <div className={styles.carouselInnerContainer} ref={carouselRef}>
      <div className={styles.carouselSlide}>Test1</div>
      <div className={styles.carouselSlide}>Test2</div>
      <div className={styles.carouselSlide}>Test3</div>
      <Slide />
    </div>
  )
}

Answer 2

Encountering an issue arises when attempting to update the state each time the scroll position changes

const carouselScrollUpdate = (e) => {
  setCurrentScrollPos(e.target.scrollLeft)
}

Each call to setCurrentScrollPos triggers a re-render of your component, leading to flickering

Instead of updating the state constantly, consider setting the state only when the scrolling stops using setTimeout:

const carouselScrollUpdate = (e) => {      
    clearInterval(timer);
    timer = setTimeout(() => {
        console.log('set scroll')
        setCurrentScrollPos(e.target.scrollLeft)
    }, 500);      
}

Alternatively, you can set the state based on specific conditions:

const carouselScrollUpdate = (e) => {      
    if (isNearNextSlide()) {
      setCurrentScrollPos(e.target.scrollLeft)
    }         
}

const isNearNextSlide = () => {
   // add logic to determine satisfaction of conditions
}

Edit:

After conducting tests, I identified that the problem lies within the nested Slide component inside . I resolved this by relocating the Slide component outside the main Carousel component, avoiding unnecessary recreation of the Slide component during rendering

import styles from './carousel.module.scss'
import { useEffect, useRef, useState } from 'react';

const Slide = () => <div className={styles.carouselSlide}>Test Sub</div>

export default function Carousel() {
  const [currentScollPos, setCurrentScrollPos] = useState(0)
  const carouselRef = useRef()

  useEffect(() => {
    const carouselScrollUpdate = (e) => {
      setCurrentScrollPos(e.target.scrollLeft)
    }
    carouselRef?.current?.addEventListener('scroll', carouselScrollUpdate, { passive: true })
    return () => {
      carouselRef?.current?.removeEventListener('scroll', carouselScrollUpdate, { passive: true })
    }
  }, [carouselRef])
      
  return (
    <div className={styles.carouselInnerContainer} ref={carouselRef}>
      <div className={styles.carouselSlide}>Test1</div>
      <div className={styles.carouselSlide}>Test2</div>
      <div className={styles.carouselSlide}>Test3</div>
      <Slide />
    </div>
  )
}

Issue with flickering scroll-snap in React component with useState

Answer №1

Similar questions

Sorting through various data inputs in one JSON file

"Enhance user interactions: Zooming in on input fields in

Intersecting Rays and Positioning Spheres with three.js

Bootstrap: Arrange multiple images horizontally within a row

What is the process for verifying which classes have been assigned to a specific component?

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

Creating a custom video to use as the favicon for my website

What is the best way to incorporate a set of buttons and dynamically update them by using next and previous buttons?

When adding margin-left and margin-right, images do not appear in their designated positions

Is there a mistake in the way I installed create-react-app?

Iterate endlessly over CSS styles in Angular 4

The lower div is overlapping the upper div in a smaller viewport

Adjust the label width to ensure that it aligns correctly with the outlined input field

Encountering an issue when using the Google authentication provider with Next.js version 13

Storing a webpage in HTML with the use of @import function in CSS

What is the best way to integrate the react-simple-captcha canvas element within an MUI Dialog component?

In the desktop view, the onClick button requires two clicks to trigger the onClick function, while in the mobile view, it only takes one click as expected

Adjust the border color of Material UI's DatePicker

Error in NextJS with TypeScript when updating data in a useState variable

Comparing E-commerce: Laravel's Full MVC Approach vs Next.JS for Dynamic Views