Handling thousands of draggable elements?

[CrageJ]

I'm working on a project which will render thousands of draggable grid elements. By itself the library could not handle more than a few hundred elements, and using lazy rendering via suspense did not help. Would there be any further optimizations possible for this use case? Are there any other libraries, including non-react libraries better suited for this task?

I did my experiments here. This was generated by chatGPT as I have not used react before.

[LordZardeck]

We had a similar issue, tons of VERY complex components, getting constantly re-rendered on dragmove, ended up solving it by creating a component that used the dnd hooks, then passed only the data the component would need to a memoized slot. This way re-rendering stopped at the hook unless something changed that the component cared about. For example:

import { memo } from 'react'
import { Slot } from '@radix-ui/react-slot'

export const MemoizedSlot = memo(Slot)

import type { ForwardedRef, PropsWithChildren } from 'react'
import { forwardRef, useMemo } from 'react'
import { MemoizedSlot } from '@core/ui/utils'
import { useDroppable } from '@dnd-kit/core'
import { mergeRefs } from 'react-merge-refs'

export type DroppableProps = PropsWithChildren<
	Omit<Parameters<typeof useDroppable>[0], 'id'> & {
		id: string
	}
>

export const Droppable = forwardRef(function Droppable<R extends HTMLElement>(
	props: DroppableProps,
	ref: ForwardedRef<R>,
) {
	const { isOver, setNodeRef } = useDroppable(props)
	const memoizedRef = useMemo(() => mergeRefs([ref, setNodeRef]), [ref, setNodeRef])

	return (
		<MemoizedSlot
			{...props}
			ref={memoizedRef}
			data-drag-over={isOver}
		/>
	)
})