How do I manipulate the DOM using ref? (6) Best practices

This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Translate: beta.reactjs.org/learn/manip…

Because React already processes the DOM structure based on render’s output, your components won’t need to manipulate the DOM very often. However, there may be times when you need to manipulate DOM elements managed by React, for example, to focus on a node, scroll to the node, or calculate its width and height. React has no built-in method to do this, so you’ll need ref to point to the DOM node.

In this series of articles you will learn:

• How do I access DOM nodes managed by React using the REF attribute
• How to integrate JSXrefAttribute associated withuseRefhook
• How do I access the DOM nodes of other components
• In which case it is safe to modify the DOM managed by React

For an introduction to and examples of refs, see my previous series of articles, useRef, which is easy to parse

series

• How do I manipulate the DOM using ref? (1) Use ref to access DOM node
• How do I manipulate the DOM using ref? (2) Use examples
• How do I manipulate the DOM using ref? (c) How to use the ref callback to manage the list of ref
• How do I manipulate the DOM using ref? The forwardRef accesses its component’s DOM node
• How do I manipulate the DOM using ref? React State Updates DOM synchronously

Best practices for manipulating the DOM using Refs

Refs are an escape hatch and you should only use them when you have to “get out of React”. Common examples of this include managing focus, scrolling to a location, or calling a browser API not exposed by React.

If you use non-destructive actions like focus and scrolling, you shouldn’t have any problems. However, if you try to modify the DOM manually, you may conflict with the changes made by React.

To illustrate this, the example includes a welcome message and two buttons. The first button toggles whether the message is visible or not using conditional render and state, as you would normally do in React. The second button forcibly removes it from the DOM outside the React control using the Remove () DOM API.

Try pressing “Toggle with setState” a few times. The message should disappear and reappear. Then press Remove from the DOM. This will forcibly delete it. Finally, press “Toggle with setState” :

import {useState, useRef} from 'react';

export default function Counter() {
  const [show, setShow] = useState(true);
  const ref = useRef(null);

  return (
    <div>
      <button
        onClick={()= >{ setShow(! show); }}> Toggle with setState</button>
      <button
        onClick={()= > {
          ref.current.remove();
        }}>
        Remove from the DOM
      </button>
      {show && <p ref={ref}>Hello world</p>}
    </div>
  );
}
Copy the code

After manually deleting a DOM element, attempting to display it again using setState causes a crash. This is because you changed the DOM, and React doesn’t know how to continue to manage it properly.

Avoid changing DOM nodes managed by React. , modify, add child elements to, or remove child elements from elements managed by React may result in inconsistent visual results or crashes similar to those described above.

However, that doesn’t mean you can’t do it at all. It needs to be cautious. You can safely modify parts of the DOM that React has no reason to update. For example, if some