Performance issues with useDragLayer hook

Describe the bug I am animating a hand of playing cards. I translate each card individually when it is dragged (instead of having a drag preview), therefore I have 1 custom drag layer per card. The performances was dropping with the number of cards in hand, so I tried to avoid listening to the client offset in each drag layer. It turn out it is not possible given the current implementation of useDragLayer hook.

The 2 “useEffect” hooks inside useDragLayer looks pretty strange to me: why would you want to subscribe to something every time your component rerenders? It turns out that inside the monitor, we add a listener to the redux store each time.

I tried to reimplement useDragLayer but with only a single subscription when the hook is created: it does not work. I could not understand why the listener of the redux store is never called when I did that.

Expected behavior I want to be able to collect the offset values conditionally in useDragLayer hook, in order to have multiple hooks but only one which causes the component to rerender. Also, I think the spamming of listener into the redux store should be fixed to improve the performances.

Workaround I created a custom specialized hook which performs much better:

const useDragOffsetDiff = (enabled: Boolean) => {
  const {dragDropManager} = useContext(DndContext)
  invariant(dragDropManager != null, 'Expected drag drop context')
  const monitor = (dragDropManager as DragDropManager).getMonitor()
  const [dragOffsetDiff, setDragOffsetDiff] = useState(monitor.getDifferenceFromInitialOffset())
  const offsetChangeListener = () => setDragOffsetDiff(monitor.getDifferenceFromInitialOffset())
  const [intervalId, setIntervalId] = useState<NodeJS.Timeout>()
  useEffect(() => {
    if (enabled) {
      setIntervalId(setInterval(offsetChangeListener, 40))
    } else if (intervalId) {
      clearInterval(intervalId)
    }
  }, [enabled])
  return dragOffsetDiff
}

Right now I could not find another way than setInterval to collect the offset. The store is not exposed by the DragDropManager, so I could not add my own listener to it.

[fromi]

I just came up with a better workaround, by listening to the redux store instead of setting an interval:

import {invariant} from '@react-dnd/invariant'
import {DragDropManager} from 'dnd-core/lib/interfaces'
import {useContext, useEffect, useState} from 'react'
import {DndContext} from 'react-dnd'

export const useDragOffsetDiff = (enabled: Boolean, fps = 60) => {
  const {dragDropManager} = useContext(DndContext)
  invariant(dragDropManager != null, 'Expected drag drop context')
  const monitor = (dragDropManager as DragDropManager).getMonitor()
  const [dragOffsetDiff, setDragOffsetDiff] = useState(monitor.getDifferenceFromInitialOffset())
  const offsetChangeListener = () => setDragOffsetDiff(monitor.getDifferenceFromInitialOffset())
  const [intervalId, setIntervalId] = useState<NodeJS.Timeout>()
  const cleanup = () => {
    if (intervalId) {
      clearInterval(intervalId)
      setDragOffsetDiff({x: 0, y: 0})
    }
  }
  useEffect(() => {
    if (enabled) {
      setIntervalId(setInterval(() => {
        offsetChangeListener()
      }, 1000 / fps))
    } else {
      cleanup()
    }
    return cleanup
  }, [enabled])
  return dragOffsetDiff
}

[fromi]

I just came with a far better solution. This is how I use “useDragLayer” and prevent it from spamming too many changes:

import {shallowEqual} from '@react-dnd/shallowequal'
import {useState} from 'react'
import {DragLayerMonitor, useDragLayer} from 'react-dnd'

export default function useEfficientDragLayer<CollectedProps>(collect: (monitor: DragLayerMonitor) => CollectedProps): CollectedProps {
  const collected = useDragLayer(collect)
  const [previousCollected, setPreviousCollected] = useState<CollectedProps>(collected)
  const [requestID, setRequestID] = useState<number>()
  if (requestID === undefined && !shallowEqual(collected, previousCollected)) {
    setPreviousCollected(collected)
    setRequestID(requestAnimationFrame(() => setRequestID(undefined)))
  }
  return previousCollected
}

A few examples of drag&drop using this hook are available on my website: https://game-park.com/