This video is great for 2 reasons: it shows a neat pain-killer for drag-and-drop, and it showcases that no matter the additional tech, it's a major pain in the lower back to figure out what the React code will effectively do at runtime 🤓
1. "This has a bug let me show you" 2. "The bug actually is not here" 3. "This is still clearly the fault of the author, since the example is misleading" 4. "But here is a bug" 5. "Interesting" Listen, it is pretty clear the author of the example is no react dev, still the attitude is really a problem. "Damn I was wrong, learned something new" is a lot nicer than the other person always being at fault
Drag and drop is one of those things that seems like it should be relatively simple, then you try to do basically anything with it and realize how unbelievably complex it gets so quickly
It's normal that it doesn't rerender and it doesn't break, because even if you move a dom element, as long as the istance is the same it will work. This is the same way portals work. What you don't have to do is cloneElement and delete the original one, in that case react will break. Using key "breaks" it because react will take each element and destroy them, and create a new instance in the DOM. What should be clear to people is that what you have into JSX doesn't necessarily match with the actual DOM, JSX it's only a set of instructions that tell react what elements you have and what's their initial position, but you can move whatever you want with a js script. Potentially you can even remove an element from the root document but keep it in memory, react will still track it.
Uncommonly great video quality. I feel like this will get less views than other stuff, but more people will come back to this video and use the information. A+++ SUPER FAST SHIPPING && SUPER CLEAN
It's great that this works for vanilla js. Though for react, the formkit drag and drop seems much better. Barely any setup, just give it a list and plug in the ref for basic functionality. dndkit is fine as well, but it's definitely a lot more manual if you want to keep state synced from what i remember from using it. Anything is better than beautiful dnd though.
I love auto animate, I’ve used it in pretty much all of the react apps I’ve worked on, it just gives the right amount of animation needed, not too fancy, just the needed! ❤
Honestly I doubt anyone would run into those edge cases you speak of. More than edge cases, this was default react behavior. It's the same with portals. If you re-render the parent of the portals, of course the portals will re-render. What you want is external state to be unrelated to swapy so the container itself never re-renders with a different key, and then it's just fine to have state anywhere else. The only time swapy broke was when you changed the key, so react thought the container was an entirely new div.
To be honest, I've felt like DndKIt hasn't really been ready for production since it's early "beta" release, compared to react-beautiful-dnd. It seems to lack a ton of features and edge-cases.
Good to know I wasn't the only one that felt that way. It felt like I was running into edge case after edge case, which could have been solved with two lines of documentation.
0:15 I had to manually implement drag and drop for a custom widget using pyqt5 for a coursework project once. it took 10 hours to write the 50 lines of code needed to make it work.
"Can't handle react renders' edge cases well" So it will work fine with all other frameworks So the problem is not the library, it's React's re-rendering model
Although react-beautiful-dnd is no longer actively maintained other than bug fixes, it is still the most complete solution to this day. Even Linear uses it-it's still not _perfect_, but having tried a ton of other solutions, I can hardly recommend anything else really. Not even DndKit.
I'm curious to hear your thoughts on the Pragmatic drag and drop from Atlassian. I'm just investigating it now, and while it takes a bit more to set up, I like how it's applicable to a lot of different DnD situations.
This morning I found out about something I have never noticed on Firefox before. I had a a hidden checkbox input with default value to checkbox. When you change the value and refresh the page, Firefox update everything on the page but does not change the last value of that input. I cant find any cache/local storage ref to the value. It just does it somehow. It doesn't on chrome. I am not using any lib or framework by the way or cache mechanisms.
The reason the App doesn’t rerender is because there is no state update. There are dom events happening that switch the placements of the boxes but react isn’t aware of the changes because there is no set state function being called
out of curiosity, when you found the problem/edge case with having a global state which updated causing any changes made to be reset - would having it stored in localStorage (as the example had) have prevented this? my thoughts being that the re-render would then fetch where things should be from localStorage or wherever and then rendered using that. (im still a somewhat react noob)
I thought it was going to be a demo of the LIBRARY, instead we got a dude trying to break react, which btw, is so unnecessary for this example anyways...
I can't seem to find any support or community for this library anywhere but here? I am currently implementing it in a POC. It's a Next 15 project with shadcn and tailwind. I tried to make the "React Dynamic" example from their github and i can't see to make it work at all. It breaks already from the get go with "Cannot create a Swapy instance because your HTML structure is invalid." - And then it is pointing to this: swapyRef.current = createSwapy(container, { manualSwap: true, swapMode: "hover", autoScrollOnDrag: true, }); Anyone know what i am doing wrong??
btw, i have this line right above the function that fails: const container = document.querySelector(".container")!; -idk what the exclamation mark is all about, but it is in both examples i have found :s
i don't get how react up to this day is so fragile. I don't see the benefit of it over the vue ecosystem where everything just works. including islands
Nothing in this video provide React to be "fragile". The simple explanation here is that if you update the DOM outside of React, React won't keep track of those changes. Updating the `key` will blow away the element and its children and result in a new node during reconciliation. Vue does not solve this, since it also relies on a VDOM. So both would "break" the same way. Only frameworks that uses the DOM as source of truth could potentially work (although there's likely other reasons it wouldn't).
Damn, all that shows me how backwards React actually is compared to the automatic reactivity system in Vue 3, you never run into mess like this, rather than spending time fixing re-renders you focus on business logic instead, amazed at how good Vue is compared to this, everyone should try it.
bruh drag and drop is legit the worst problem I spent months trying to implement it in my custom UI framework I made for fun, it required a rewrite of half the framework and the code was still supremely cursed
@MrSprinkles1F369 Ah ok cool they seem to be a bit different. my use case though react aria did a good job and was very simple to use . being buolt for react is a positive when its a react app.
Haven't played with the library but just watching it looks like changes to the JSX / VDOM break it? Maybe that's why they are using the localStorage on re-render as a workaround? You commented out that part so I wonder if it works again if you put the localStorage caching back in.
Why doesn’t React address the issue of using a vanilla JS library? Every other framework under the sun makes it trivial to wrap any vanilla JS library.
This video is great for 2 reasons: it shows a neat pain-killer for drag-and-drop, and it showcases that no matter the additional tech, it's a major pain in the lower back to figure out what the React code will effectively do at runtime 🤓
the problem I had, that I had to insert a timeout functionality when using the ondragstart, otherwise things would bug out completely :)
1. "This has a bug let me show you"
2. "The bug actually is not here"
3. "This is still clearly the fault of the author, since the example is misleading"
4. "But here is a bug"
5. "Interesting"
Listen, it is pretty clear the author of the example is no react dev, still the attitude is really a problem. "Damn I was wrong, learned something new" is a lot nicer than the other person always being at fault
🎉🎉 this
how will he know he was wrong ? he's just thinking out loud
So glad to see more and more tools gradually supporting SolidJS!
With Solid and Svelte you just need to expose native JS bindings and it will work
@@untlsn Not many tools support native bindings these days. Most of them only work with react
Solid is the goat
@@untlsn I believe that was the intended joke ;-)
Drag and drop is one of those things that seems like it should be relatively simple, then you try to do basically anything with it and realize how unbelievably complex it gets so quickly
It's normal that it doesn't rerender and it doesn't break, because even if you move a dom element, as long as the istance is the same it will work. This is the same way portals work. What you don't have to do is cloneElement and delete the original one, in that case react will break.
Using key "breaks" it because react will take each element and destroy them, and create a new instance in the DOM.
What should be clear to people is that what you have into JSX doesn't necessarily match with the actual DOM, JSX it's only a set of instructions that tell react what elements you have and what's their initial position, but you can move whatever you want with a js script. Potentially you can even remove an element from the root document but keep it in memory, react will still track it.
There's pragmatic-drag-and-drop from atlasian now
Funnily enough with the auto animate mention, formkit also have their own drag and drop library that's really easy to implement
My thoughts exactly! Also framework-agnostic
Uncommonly great video quality. I feel like this will get less views than other stuff, but more people will come back to this video and use the information. A+++ SUPER FAST SHIPPING && SUPER CLEAN
Angular CDK had the best drag and drop I've seen, and it's relatively light on it's own
It's great that this works for vanilla js. Though for react, the formkit drag and drop seems much better. Barely any setup, just give it a list and plug in the ref for basic functionality. dndkit is fine as well, but it's definitely a lot more manual if you want to keep state synced from what i remember from using it.
Anything is better than beautiful dnd though.
Very nice library! And it's worth mentioning that it works with pure js even if most developers can't build shit without a framework.
That was pretty impressive the way you were able to find a way to sprinkle a ton of salt into that compliment.
Love these kinds of videos, introducing us to new technologies, makes being up to date and more efficient a lot easier.
Thanks theo
I love how confused Theo is about the example working so well
Atlassian pragmatic drag and drop
10:51 look at how happy he looks after breaking it successfully
@theo - I totally wanted a video on this subject. Excellent job. Thx !!!
You can force a subtree to reset its state by giving it a different key.
This is react behavior and not an edge case.
TAKE A SHOT ITS NEW JAVASCRIPT LIBRARY DAY
This is normal in every ecosystem with a package registry though...
@@cyrus01337all I’m hearing is more shots
Theo breaking code is the content I didn't know I needed. I could watch that for hours!
Pragmatic Drag-n-Drop (by Atlassian) is also very good - framework agnostic
I love auto animate, I’ve used it in pretty much all of the react apps I’ve worked on, it just gives the right amount of animation needed, not too fancy, just the needed! ❤
It's insane clicking on Theo's videos with DeArrow enabled.
Lmao honestly. Someone has it out for him
Honestly I doubt anyone would run into those edge cases you speak of. More than edge cases, this was default react behavior. It's the same with portals. If you re-render the parent of the portals, of course the portals will re-render. What you want is external state to be unrelated to swapy so the container itself never re-renders with a different key, and then it's just fine to have state anywhere else. The only time swapy broke was when you changed the key, so react thought the container was an entirely new div.
7:29 theo relising the theoretical complex solutions he build in twitch is in this library 😂
Pragmatic Drag and drop is 🔥🔥
dnd-kit, sadly, seems to be a dying project. Not much movement is happening on it.
The docs are just so rough man. A docs overhaul could save the project
Just used it for my own project and man it was annoying
To be honest, I've felt like DndKIt hasn't really been ready for production since it's early "beta" release, compared to react-beautiful-dnd. It seems to lack a ton of features and edge-cases.
Good to know I wasn't the only one that felt that way. It felt like I was running into edge case after edge case, which could have been solved with two lines of documentation.
You mean not much dragging coz the team is on DND?
loving the tendency for front-end libraries to use HTML attributes!
2:00 Svelte has this natively, with one line of code
0:15
I had to manually implement drag and drop for a custom widget using pyqt5 for a coursework project once. it took 10 hours to write the 50 lines of code needed to make it work.
drag and drop is actually crazy hard
"Can't handle react renders' edge cases well"
So it will work fine with all other frameworks
So the problem is not the library, it's React's re-rendering model
Pragmatic DND ❤
No drag animation == no go. Dead on arrival.
wow this video made me subscribe, i dont do that so great video
jQuery UI had draggable over a decade ago :) Was super easy to use when I used it about 10yrs ago.
Although react-beautiful-dnd is no longer actively maintained other than bug fixes, it is still the most complete solution to this day. Even Linear uses it-it's still not _perfect_, but having tried a ton of other solutions, I can hardly recommend anything else really. Not even DndKit.
I am exploring drag and drop and use used dnd kit and I am currently exploring Atlassian's pragmatic drag and drop.
I might also try this.
I'm curious to hear your thoughts on the Pragmatic drag and drop from Atlassian. I'm just investigating it now, and while it takes a bit more to set up, I like how it's applicable to a lot of different DnD situations.
Welcome to today's episode of, Theo tries to break a library!
I need this for table rows!!!! :( dnd kit will rerender sooooo much
Why I didn't know these sooner.
😂😂😂
Dnd kit with framer motion is still the best.
Definitely check out pragmatic-drag-and-drop. Some Atlassian oss as well. (same org that made react-beautiful-dnd, and Jira lol).
Dnd seems working well
any good modern alternatives for react-grid-layout?
react-grid-layout, muuri are pretty good
Shall we introduce you to the Angular CDK Drag & Drop? It's awesome and easy to use
This morning I found out about something I have never noticed on Firefox before. I had a a hidden checkbox input with default value to checkbox. When you change the value and refresh the page, Firefox update everything on the page but does not change the last value of that input. I cant find any cache/local storage ref to the value. It just does it somehow. It doesn't on chrome. I am not using any lib or framework by the way or cache mechanisms.
Try setting the autocomplete property to off on that checkbox
dnd kit has a bug with the sortable element when height of each element have different height
Cries in react native. Having to use gesture handler and reanimated
Right as a needed to look up how to do this sort of stuff
YES! YES PLEASE
For some time I was getting the feeling that I don't understand react re-render 😂
can it drag drop multiple divs ?
Looks awesome. Are the drop slots predefined sizes? IE when I drag one item to the next can it retain it's item size and not the new drag slot size
How often do you need this exact feature? I cannot think of a use case... But it sure is pretty
The reason the App doesn’t rerender is because there is no state update. There are dom events happening that switch the placements of the boxes but react isn’t aware of the changes because there is no set state function being called
out of curiosity, when you found the problem/edge case with having a global state which updated causing any changes made to be reset - would having it stored in localStorage (as the example had) have prevented this? my thoughts being that the re-render would then fetch where things should be from localStorage or wherever and then rendered using that.
(im still a somewhat react noob)
I thought it was going to be a demo of the LIBRARY, instead we got a dude trying to break react, which btw, is so unnecessary for this example anyways...
I can't seem to find any support or community for this library anywhere but here?
I am currently implementing it in a POC. It's a Next 15 project with shadcn and tailwind. I tried to make the "React Dynamic" example from their github and i can't see to make it work at all.
It breaks already from the get go with "Cannot create a Swapy instance because your HTML structure is invalid." - And then it is pointing to this: swapyRef.current = createSwapy(container, {
manualSwap: true,
swapMode: "hover",
autoScrollOnDrag: true,
});
Anyone know what i am doing wrong??
btw, i have this line right above the function that fails: const container = document.querySelector(".container")!; -idk what the exclamation mark is all about, but it is in both examples i have found :s
I think dockview is the same library that Leetcode uses for there drag and drop layout with tabs.
the lack of attempt at making this accessible in their examples is a no from me
I was also playing around with it in July. Then it still had problems with absolute positioning. Hope that gets resolved.
AutoAnimate from Vue Formkit is a good to know for me. Thanks...
why threre are no UI libraries for javascript?
I also spent a lot of time dealing with drag and drop. That's why I get so angry using websites that do it badly.
Is it better / easier to work with Swappy over dnd kit?
Which editor is he using that has a navigator included??
Stackblitz
I have a great time with DnD every weekend with my friends
gosh it's almost like I used to do all this stuff in jQuery in a few lines of coffee ages ago... lol
Where is this? Is the park private?
I wonder if this can be combined with PaneForge (Svelte), because that would be extremely powerful...
anybody know how this can work with angular v14 or some similar library compatible with v14
I'm looking for react-native, but seems none here.
Time for shadcn to hop on
drag and drop complex? Not sure if I agree, but it could be hard to implement.
May be it is working in react future react 20😂
i don't get how react up to this day is so fragile. I don't see the benefit of it over the vue ecosystem where everything just works. including islands
Nothing in this video provide React to be "fragile". The simple explanation here is that if you update the DOM outside of React, React won't keep track of those changes. Updating the `key` will blow away the element and its children and result in a new node during reconciliation.
Vue does not solve this, since it also relies on a VDOM. So both would "break" the same way. Only frameworks that uses the DOM as source of truth could potentially work (although there's likely other reasons it wouldn't).
Damn, all that shows me how backwards React actually is compared to the automatic reactivity system in Vue 3, you never run into mess like this, rather than spending time fixing re-renders you focus on business logic instead, amazed at how good Vue is compared to this, everyone should try it.
bruh drag and drop is legit the worst problem I spent months trying to implement it in my custom UI framework I made for fun, it required a rewrite of half the framework and the code was still supremely cursed
how about muuri js?
Dude setCount((v)=>v+1) is correct usage
How much did they pay you
you know react aria has a pretty good drag and drop as well
@MrSprinkles1F369 Ah ok cool they seem to be a bit different. my use case though react aria did a good job and was very simple to use . being buolt for react is a positive when its a react app.
Pragmatic drag and drop seems better for React,
50% of this video confirmed once again why front side JS frameworks are bad
You're right. He should use rust and egui
Html sucks. Use webgl and render to the canvas
"its so easy to use" until you need to do something difficult :) then it becomes a nightmare to fight against
I'll never understand why useless fragments are annoying but all the semicolons are fine lol
I had this idea a few months ago and wrote it down as possible package to make
God I hate myself
If you won't love yourself, then I will
_opens arms in anticipation of hug_ . ❤
congrats, someone else made it, so now you don't have to make it yourself and maintain it for free for the rest of time!
@@jeslinmx22 I'd rather have problems of success than nothings of lazyness :P
Share the repo so we all can contribute together to make a better one which use more of react stuff
@@nofacee94 I already said I hate myself, you don't have to sell it to me
Haven't played with the library but just watching it looks like changes to the JSX / VDOM break it? Maybe that's why they are using the localStorage on re-render as a workaround? You commented out that part so I wonder if it works again if you put the localStorage caching back in.
I thought everyone use framer-motion for DND
Why doesn’t React address the issue of using a vanilla JS library? Every other framework under the sun makes it trivial to wrap any vanilla JS library.
i mean it just does not work on vanilla js???
I’d prefer to learn how to build this instead of just keep installing packages
8am … watching this… 😂
Javascript is now officially low code.
please remove the useEffect and use ref callback without query selector
cool
It is so clear every time Theo makes an authoritative statement that he just does not understand how react or browser architecture works at all.
DRAG AND DROP MENTIONED
LLLET'S GO
already bots here
Dockview looked cool until I tried to load it in safari 😭
swappy seem to not respect the setting qutoanimate does