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.
Related
Is there any way to create a react component having controllable and/or default-uncontrollable scrolling pos?
I created a react component having overflow=scroll/auto.
Everything is done using ref=elmRef trick and manipulating through useEffect.
Is it able not to use ref anyway? I want to make a purely react way.
I feel using ref is like a jquery way. The manipulation is done after actual dom component rendered, and might trigger the second render at startup if the manipulation causing to modify any states. There is a state that the value depend on the scroll position. Rendering dom twice is wasteful performance.
Here the visualization of the component i created:
I need to get a child component position in a tree in my React app to make a 'tour/guide' for my application. if it was vanilla js, I was able to easily get the target node using document.querySelector() but since in react we have to use refs to get access to the element, and it's not a good way to use refForward in many child components to approach the target one from the grand parent component, what is the best solution to get properties of a child component in a tree?
I think one possible solution is saving target elements' position in a global state manager like context or redux, but since the position is changing frequently, it would cause some critical performance issues in the app.
Thank you in advance.
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.
What I learned about Virtual DOM and its diff algorithm is, that when a change occurs in certain component(or element / and its children as well), it is efficient to reconciliate that particular component and children because other than that, other DOM component will not be changed.
However what I already know is that the time-consuming part of DOM manipulation is the moment of recalculating element's style(like CSS).
If a component in between of many other components changes, such as height style changes or get unmounted, by means of such change, sibling components below will be affected, in which the style of those components should be all re-rendered(relayout or repaint).
Then, doesn't this mean that the object of React - manipulating only the changed part of view by virtual DOM and diff algorithm - would not be achieved?
Am I misunderstanding, or is this normal?
If this is normal(situation that due to the changed component in the middle of other components, other components below also have to be modified), then what is the advantage of React compared to plain DOM manipulating method, other than batch process or declarative method? Is this okay to call it "patch"?
Your concern is that changing the style of a parent component might trigger browser layout of its child components
However, this problem still occurs regardless of whether you are using react's virtual dom or not
The benefit in react's virtual dom, is that it aggregates dom operations and debounces (de-dupes) the redundant operations
This broad optimization usually results in fewer total dom operations than if you "hand-coded" it
In rare circumstances, you might be able to produce a more optimal result without react's virtual dom, by very carefully managing dom operations manually
Going 'manual' is rarely worth the consideration
React 'virtual DOM' is just a javascript object. It is nothing to do with styles and layouts at the time of the reconciliation. After each render React can diff this object with the result of the previous render and only updates the changed attribute of the corresponding DOM element.
Here is an explanatory image from React doc, you can see that the update is well localized.
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'
}