How to preserve an instance of a component when transferring it to another parent component in react?
Suppose we have two components of the brother's reaction, called OldContainer
and NewContainer
. Inside OldContainer
there is a child component containing the tag <video>
and the video is currently playing.
The user can now drag and drop the child component (with the video) and drop it in NewContainer
, and they expect the video to continue playing while it is being dragged and after it is removed.
So the video seems to stick to the mouse position, and when dragged and dragged in a new container, it will animate to its new position (again, it doesn't pause).
How would you implement this? Can we implement this in a clean way (in the spirit of pure functions)?
Clarification . I could use some other element instead of a video tag to explain this problem. An element NumberEasing
would be a better example, as it must be persisted in order for the component to interact and maintain.
Update 1 . Code examples would obviously be good, but what I'm mostly looking for is just a general description of how you approach this problem in a "functional" way. How do you keep your review code simple and easy to reason about? Who controls the drag gesture? How do you model the data that is fed into views?
source to share
What do you want to keep? Are these Javascript objects that the component stores as state, or is this state in the DOM (like how long a video has been playing or text selection in an input box)?
If it's just a Javascript object as a state, you're better off moving the source of that state to another service (something like Flux). Thus, it doesn't matter if the component is recreated, because it can be recreated with the state that was there before.
EDIT
The way to keep your overview code simple and straightforward is to not persist state inside your components. Instead, all data required by the component must be passed to the component as props. Thus, the component is "clean" because it displays the same result as the same props. It also poses the problem of not wanting to reuse the component instance without issue, since it doesn't matter when the same input produces the same result.
For drag and drop, I suggest looking at: https://github.com/gaearon/react-dnd .
How you model the data you pass to view components is up to you and the needs of your application. The components shouldn't care, they should just wait to receive the data passed as props and render it. But the popular approach to solving this is, of course, Flux, and there are many libraries that implement Flux in different ways.
SECOND EDIT
Regarding whether you have a subtree with hundreds of components that you want to move: I'll start by creating the external state (pure components) anyway and rendering that tree in a new location. This means that React is likely to recreate this entire subtree, which is good. I wouldn't stray from this path if the performance was terrible (just guessing it might be terrible is not enough).
If the performance turned out to be terrible, I would wrap that whole subtree in a component that caches the actual DOM tree and reuses it (if it gets the same props). But you should only do this when absolutely necessary, as it goes against what React is trying to do for you.
THIRD CHANGE
About gestures: I started by listening for gesture events in componentDidMount
and out of a callback setState
on a component with the coordinates it should have. And then draw the component at render
the specified coordinates. React doesn't recreate the component when you call setState
, but it will re-render it (and differentiate the output). If the only thing you changed are the coordinates, they should be fast enough.
If this turns out to be too slow, for example if the subtree of that component is huge and becomes a bottleneck to recreate the vDOM subtree, then I would move the DOM node directly into the RAF loop outside of Reacts to Control. And I would also like to talk about why this is needed, because it may seem strange to another developer later.
source to share