React Advanced Guide: Refs and the DOM usage timing details

Refs and the DOM

Refs provides a way to allow us to access DOM nodes or React elements created in render methods
In some cases, it is necessary to force modification of subcomponents outside of a typical data stream. The modified child component may be an instance of a React component or a DOM element.

When to use Refs

Manage focus, text selection, or media playback
Trigger forced animation
Integrate third-party DOM libraries

Do not overuse Refs

Create Refs

()create
Attach to React elements through ref attribute

class MyComponent extends  {
  constructor(props) {
    super(props);
     = ();
  }
  render() {
    return <div ref={} />;
  }
}

Visit Refs

Accessed in the current property of ref

const node = ;

Add ref to DOM elements

class CustomTextInput extends  {
  constructor(props) {
    super(props);
    // Create a ref to store the DOM element of textInput     = ();
     = (this);
  }
  focusTextInput() {
    // Use the native API directly to get focus on the text input box    // Note: We access the DOM node through "current"    ();
  }
  render() {
    // Tell React we want to associate <input> ref to    // On the `textInput` created in the constructor    return (
      &lt;div&gt;
        &lt;input
          type="text"
          ref={} /&gt;
        &lt;input
          type="button"
          value="Focus the text input"
          onClick={}
        /&gt;
      &lt;/div&gt;
    );
  }
}

Add Ref for class component

  class AutoFocusTextInput extends  {
    constructor(props) {
      super(props);
       = ();
    }
    componentDidMount() {
      ();
    }
    render() {
      return (
        <CustomTextInput ref={} />
      );
    }
  }

You cannot use the ref property on a function component. If you want to use ref in a function component, you can use forwardRef (can be used in conjunction with useImperativeHandle), or you can convert the component into a class component.

function CustomTextInput(props) {
   // This must be declared so that ref can refer to it   const textInput = useRef(null);
   function handleClick() {
     ();
   }
   return (
     &lt;div&gt;
       &lt;input
         type="text"
         ref={textInput} /&gt;
       &lt;input
         type="button"
         value="Focus the text input"
         onClick={handleClick}
       /&gt;
     &lt;/div&gt;
   );
 }

Expose DOM Refs to parent component

Do not recommend exposing DOM nodes

Callback Refs

Another way to set refs is called "callback refs".
It can help you control more carefully when refs is set and uninstalled
Unlike passing the ref property created by createRef() , you will pass a function. This function accepts React component instances or HTML DOM elements as parameters so that they can be stored and accessed elsewhere

    class CustomTextInput extends  {
     constructor(props) {
       super(props);
        = null;
        = element =&gt; {
          = element;
       };
        = () =&gt; {
         // Use the native DOM API to get focus on the text input box         if () ();
       };
     }
     componentDidMount() {
       // After the component is mounted, let the text box automatically gain focus       ();
     }
     render() {
       // Use the `ref` callback function to store the reference to the text input box DOM node to React       // On the instance (for example)       return (
         &lt;div&gt;
           &lt;input
             type="text"
             ref={}
           /&gt;
           &lt;input
             type="button"
             value="Focus the text input"
             onClick={}
           /&gt;
         &lt;/div&gt;
       );
     }
   }
// In the above example, Parent passed its refs callback function as inputRef props to CustomTextInput, and CustomTextInput passed the same function as a special ref property to <input>.  As a result, the DOM node in Parent will be set to the corresponding DOM node to the input element in CustomTextInput

If the ref callback function is defined as an inline function, it will be executed twice during the update process, the first time the parameter null is passed in, and the second time the parameter DOM element is passed in. This is because a new function instance is created every time it is rendered, so React clears the old ref and sets the new one. The above problem can be avoided by defining the callback function of ref as a binding function of class, but in most cases it is irrelevant.

This is the end of this article about React Advanced Guidelines for Refs and the DOM usage timing. For more related React Refs and the DOM content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!