每个 React 组件实例的单独去抖动

Question

I'm using a debounce library (tried different ones but currently the one from lodash) in a react component in order to avoid executing code too often while scrolling in the browser.

The problem is that I have multiple instances of the react component and it seems that the debounce function is accidentally shared between those instances. Consequently the function code with '... some code here' is only executed in one instance and not in all instances of the react component. The debounce functionality works great if I have only one instance of my component rendered.

useEffect(() => {
    document.querySelector(props.scrollSelector!)?.addEventListener('scroll', e => {
        setViewport(props, state, e.target as HTMLDivElement, ref)
    }, true)
}, [state.obj])

const setViewport = debounce((p: Props, s: State, rowHeaderObj: any, scrollContainer: HTMLDivElement, ref: any) => {
    // ... some code here
}, 20)

Is there some way to change the code so the debounce function works for each instance separately? Please consider that the react component instances have unique keys assigned so that should not be the issue.

Answer 1

One approach could be to create a new debounced function each time you register the event listener instead of reusing the same function, in which case the event handler would be debounced independently within each instance of your component.

const _setViewport = () => (
  p: Props,
  s: State,
  rowHeaderObj: any,
  scrollContainer: HTMLDivElement,
  ref: any
) => {
  // ... some code here
}

const MyComponent: React.FC<Props> = (props) => {
  const [state, setState] = useState<State>()
  const ref = useRef<any>()

  useEffect(() => {
    const srollableElement = document.querySelector(props.scrollSelector!)
    if (!srollableElement) {
      return
    }
    const setViewport = debounce(_setViewport, 20)
    const scrollHandler = (e: Event) =>
      setViewport(props, state, e.target as HTMLDivElement, ref)
    srollableElement.addEventListener('scroll', scrollHandler, true)
    return () => {
      srollableElement.removeEventListener('scroll', scrollHandler, true)
    }
  }, [state, props, ref])

  return <></>
}

As a side note, be careful with this usage of useEffect , as (I think) the props parameter that's passed to your component will change each time the parent component re-renders, causing useEffect to potentially re-run very often. One fix for this is making sure the dependencies array passed to useEffect only contains primitive or stable values. Feel free to read this section of the React docs for a discussion of this topic. Taking this into consideration, you might want to re-write the above example as follows (depending on the shape of the Props type):

interface Props {
  scrollSelector?: string
  b: string
  c: number
}

const _setViewport = () => (
  p: Props,
  s: State,
  rowHeaderObj: any,
  scrollContainer: HTMLDivElement,
  ref: any
) => {
  // ... some code here
}

const MyComponent: React.FC<Props> = ({ scrollSelector, b, c }) => {
  const [state, setState] = useState<State>()
  const ref = useRef<any>()

  useEffect(() => {
    if (!scrollSelector) {
      return
    }
    const srollableElement = document.querySelector(scrollSelector)
    if (!srollableElement) {
      return
    }
    const setViewport = debounce(_setViewport, 20)
    const scrollHandler = (e: Event) =>
      setViewport(
        { scrollSelector, b, c },
        state,
        e.target as HTMLDivElement,
        ref
      )
    srollableElement.addEventListener('scroll', scrollHandler, true)
    return () => {
      srollableElement.removeEventListener('scroll', scrollHandler, true)
    }
  }, [state, scrollSelector, b, c, ref])

  return <></>
}