Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useDrag previewRef does not work when wrapped in <StrictMode>

See original GitHub issue

Describe the bug When using React’s <StrictMode />, the previewRef from useDrag does not work, the preview is still only what the dragRef is.

Reproduction

https://codesandbox.io/s/infallible-oskar-0y8sni

Steps to reproduce the behavior:

Drag the green box

Expected behavior The entire element with the text and border should not in the drag preview, not just the green handle box.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: MocOS 11.6
Browser: Chrome
Version: 100.0.4896.127 (Official Build) (x86_64)

Issue Analytics

State:
Created a year ago
Reactions:5
Comments:6

Top GitHub Comments

4reactions

joviolcommented, Jun 1, 2022

Hello, I am experiencing the same issue. Do you know if there is a better workaround than disabling strict mode? Or if there is a plan for a fix?

0reactions

cloddocommented, Oct 6, 2022

I have the same issue, but limited to the first attempt to drag:

during first drag the preview shows only the handle
for all the following drags the preview shows correctly

The issue goes away when I disable StrictMode, and luckily in the production build the StrictMode checks are disabled by default, but is pretty annoying during development.

Top Results From Across the Web

useDrag - React DnD

The useDrag hooks returns a few key items: a set of collected props, and refs that may be attached to drag source and...

Can't load app with React v18. Maybe <StrictMode> to blame?

I'm trying to get my app to render for the first time and running into issues with React v18 and ...

Strict Mode - React

StrictMode is a tool for highlighting potential problems in an application. Like Fragment , StrictMode does not render any visible UI.

Drag and Drop functionality using react-beautiful-dnd

Having nested <DragDropContext />'s is not supported. This component calls onDragEnd when the draggable item is dropped and it's the only function required....

Strict Mode in ReactJS - LinkedIn

By default, since your App component is wrapped by StrictMode, ... Strict mode checks are run in development mode only; they do not...