When should you use DOM manipulation in your React components?

Javascript is used to update elements in the DOM that we want to change.

If you have an understanding of DOM manipulation in Javascript, you know we get retrieve HTML elements and manipulate their values, data attributes and css styles.

However, we need to take a step back from these concepts when it comes to React.

We do not manipulate the DOM elements our React component creates. We first update something called the Virtual DOM which is a representation of the DOM saved in memory, and then we update the DOM.

If we use direct DOM manipulation that means we’re updating elements instead using the virtual DOM.

This means we wont be able to fire lifecycle events like componentDidMount or componentDidUpdate or their functional equivalent, the useEffect hook. These are core parts of the React library and help us build an organized, structured codebase.

If you’re creating your React components using classes, you want to update your components using this.setState and if you’re updating functional React components, you would want to use the useEffect hook.

But there are cases when you would want to use DOM manipulation in React.

1. Your web application only partially uses React and needs to update non React components.
2. Your web application pulls in Javascript that creates DOM elements outside of your React codebase.

Both of these cases involve manipulating Javascript outside of your codebase.