Develop Reference

Is there a legit way to manipulate DOM from under React?

Given all efforts to make React work fast, I am still having performance issues when it comes to DOM manipulations governed by React. Is there a way to switch to direct DOM manipulations from under React without breaking it?
PS: I am specifically interested in removing DOM nodes.

A safe way to handle this is to build your performance-sensitive component entirely outside of React.
This can be done via web components. React has a page that explains how web components and React components can be used together over here.
Thus, you can have complete control over the shadow DOM within your web component to do whatever DOM manipulations you wish to do, and then you can insert your web compoment within React without any worry of React's virtual DOM algorithm messing with what you've done in the shadow DOM.

React is all about manipulating the state to trigger re-renders of the DOM. Instead of arbitrarily removing the element from the DOM as you would in jQuery, you should update the state by filtering out the item from props. items that will trigger a rerender of the DOM with the item removed.
For better manipulations you can use state for small and redux for midium to big projects.
useRef and useState are easy to use and manipulate.

Improving performance while zooming on multiple components with React

Problem: the zoom feature in my React app slows to a crawl when I have ~ >20 components rendered. My app needs to be able to support zoom with 1,000s of rendered components.
Current implementation of zoom:
Currently in my app I have a parent component that has a zoom feature which listens for the onWheel event and updates a zoomFactor variable using the useState hook.
Each child of this parent accesses the zoomFactor using useContext, so whenever the zoomFactor changes, the child component receives this change and updates its relevant dimensions (which in my case are an offsetX and width) by multiplying their original offsetX and width by the updated zoomFactor to yield a zoomAdjustedOffsetX and zoomAdjustedWidth.
Finally, these zoomAdjusted values are included in a styles object:
const styles = {
transform: 'translateX(' + zoomAdjustedOffsetX + 'px)',
width: zoomAdjustedWidth + 'px',
}
which is passed inline to the returned component.
I'm pretty sure the performance issue stems from the fact that I'm re-rendering all of these components during every step of the zoom. I don't need to re-render the components though, I just need to update two properties of their CSS during the onWheel event to accurately reflect the updated zoomFactor.
Therefore, my current idea on how to fix the performance issues:
Maintain a ref in my parent component to an object that maps the ID of every child component to a ref of that respective child component.
During the onWheel event, iterate through said map and "manually" update the CSS of each child component with the new zoomFactor.
I'm aware this isn't the proper "React way" of doing things, but I can't think of another way to accomplish my goal of achieving the zoom effect by updating the CSS for each component without slowing my app to a crawl re-rendering everything.
My question: would this approach yield performance benefits? Can you think of any other strategies to manipulate the CSS of 1000's of components during an onWheel event in order to achieve a 'zooming' effect?

Updating width is the killer here. The only really fast CSS properties to update are transform and opacity. Can you achieve what you want using transform: scale instead?
The next thing to look at would be debouncing the event. onWheel fires many times per frame, but you only need to render once per frame.
You might also get a small benefit from setting will-change and contain: layout in CSS.
If it's still slow after all that, you might think about avoiding a React update, like you mentioned. You could achieve this with React-spring instead of rolling your own system.

React: Component Hide/ Show vs Destroy/ Recreate

Usually when we create conditional components, we do
{ condition ? <Comp1 /> : <Comp2 /> }
My question is, what is better approach?
Hide/ Show components using CSS?
Destroy/ recreate components?
My assumption is, Hide/ Show would be a little better as you will have to go not through creating components again. Just repaint and reflow.
One scenario I can think of that would be an issue with destroy/ recreate would be when you save internal states. This can be achieved using a state management system by passing props. The thing I'm not sure is, if we keep stale components in VirtualDOM and if these components are heavy, like a grid, it will affect the performance but it might still be less than creating the entire component again. So does it makes sence to destroy components?
Not considering React.memo hook, as a caching + recreate will be better. So for a non-hooks based application, what would be a better option?

In my opinion, cuz when React to do DOM diff, it will reduce useless DOM count. If u using class to control that, React will do some extra work

When is it safe (if at all) to manually relocate a Vue-rendered DOM node?

I understand that you should not manually manipulate the DOM nodes rendered by a Vue component for reasons including:
After another render, Vue can override any changes you did
It can interfere with Vue's patching algorithm
My use case is I would like to implement a way to move a DOM node to a separately-controlled location for the purpose of displaying it fullscreen. Imagine an editor widget with a fullscreen button that "pops out" the editor and overlays it fullscreen.
I understand that I can achieve this with CSS alone using fixed positioning, but I'm not interested in that, I'm particularly interested in the consequences of moving the DOM node out from wherever it is and appending it directly to the <body> element. Will Vue still be able to patch the nodes correctly after the parent component re-renders?
I have experimented with this already and I have a working implementation, and I haven't encountered any issues yet. Still, this doesn't ease my concern, and the Vue docs don't talk about doing something like this.
What potential issues, if any, might I encounter?
portal-vue is unsuitable because it recreates the component instance each time it is relocated, which I do not want.

Depending on how the component lifecycle works in Vue, moving a component in the DOM might trigger lifecycle methods. E.g. with Custom Elements, moving means triggering disconnectedCallback of the component, and subsequently connectedCallback. This is often where the component initialization takes place.
Rather than moving the component manually from the outside, consider giving the component itself the ability to relocate.

How to preserve a component's instance while moving it to another parent component in react?

Suppose we have two sibling react components called OldContainer and NewContainer. There is a child component inside OldContainer that contains a <video> tag, and the video is currently playing.
The user can now drag the child component (with the video) and drop it in the NewContainer, and they expect the video to keep playing while it's being dragged and after being dropped.
So the video appears to stick to the mouse position, and when dragged and dropped in the new container, it animates to its new position (again, it doesn't get paused).
How would you implement this? Can we implement this in a pure way (in line with the spirit of pure functions)?
Clarification: I could have used some other element instead of a video tag for explaining this problem. A NumberEasing element would be a better example, since it would require the props and state of the component to be preserved during and after the interaction.
Update 1: Code examples obviously would be nice, but what I'm mainly looking for is just a general description of how you would approach this problem in a "functional" way. How do you keep your view code simple and easy to reason about? Who handles the drag-and-drop gesture? How do you model the data that's fed into the views?

Take a look at this library : react-reverse-portal

What is it that you want to preserve? Is it Javascript objects that the component holds as state, or is it state in the DOM (like how long a video has played, or text selection in an input box)?
If it's just Javascript objects as state, you're better of moving the source of that state to another service (something like Flux). That way, it doesn't matter if the component gets recreated because it can be recreated with the state that was there before.
EDIT
The way to keep your view code simple and easy to reason about is to not keep state inside your components. Instead, all data that the component needs should be passed into the component as props. That way, the component is "pure" in that it renders the same output given the same props. That also makes the problem of wanting to reuse a component instance a non-issue, since it doesn't matter when the same input gives the same output.
For drag and drop, I'd 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 expect to get data passed as props, and to render them. But the popular approach to dealing with this is of course Flux, and there are many libraries that implements Flux in different ways.
SECOND EDIT
Regarding if you have a subtree with hundreds of components that you want to move: I'd still start off by making the state external (pure components), and render that tree in a new place. That means that React will probably recreate that entire subtree, which is fine. I wouldn't deviate from that path unless the performance of it turned out to be horrible (just guessing that it might be horrible isn't enough).
If the performance turned out to be horrible, I would wrap that entire subtree in a component that caches the actual DOM tree and reuses it (if it gets passed the same props). But you should only do this when absolutely needed, since it goes against what React tries to do for you.
THIRD EDIT
About gestures: I'd start out with listening to gesture events in componentDidMount, and in the event callback call setState on the component with the coordinates it should have. And then render the component in render with the coordinates given. React won't recreate the component when you call setState but it will re-render it (and diff the output). If the only thing you changed was the coordinates, it should render fast enough.
If that turns out to be too slow, like if the subtree of that component is huge and it becomes a bottleneck to recreate the subtree of vDOM, I'd reposition the DOM node directly in a RAF-loop outside of Reacts control. And I'd also put a huge comment on why that was needed, because it might seem wierd for some other developer later.

Create a new variable using const or var. Put the instance of data using rest spread operator, update the necessary data to pass and send the data to the component without mutating the state of component.
Just like:
const data = {
...this.state.child,
new_data : 'abc'
}