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.

CodePudding user response：

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.

CodePudding user response：

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.