React Refs

What do you mean by React Refs?

In React, it's analogous to keys. It's a property that allows you to save a reference to specific DOM nodes or React elements. It demonstrates how to access React DOM nodes or React elements, as well as how to interact with them. It's utilised when we don't want to use props and want to update the value of a child component.
As a result, it can be used when we need DOM measurements or imperative animations to be triggered. It can also be utilised in callbacks and when connecting with third-party DOM libraries. However, it should not be used for declarative actions or excessive use.

Current Properties of the React Ref

The refs operate differently depending on the type of element they are associated with. The ref object produced in the function Object() { [native code] } returns the underlying DOM element as its current attribute when a ref is assigned to an HTML element inside the render method. When a custom class component uses the ref attribute, the ref object delivers the current instance of the component as its current property.

🚀 The value of the ref varies depending on the type of node.
🚀 The ref formed with React receives the underlying DOM element as its current attribute.
🚀 When the ref attribute is used in an HTML element, createRef() is called.
🚀 If the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current property.
🚀 Because the ref attribute lacks instances, it can't be utilised on function components.

When to use Refs

Refs are useful in the following situations:

🚀 When we need to manage focus, text selection, or media playback, we use DOM measures.
🚀 It is employed in the execution of imperative animations.
🚀 When using DOM libraries from third parties.
🚀 It's also useful for callbacks.

When to not use Refs

🚀 For anything that can be done declaratively, it should be avoided. Instead of utilising the open() and close() methods on a Dialog component, you should use the isOpen prop.

🚀 You should avoid using the Refs excessively.

How to create Refs?

Refs can be generated in React by calling React.createRef (). The ref attribute can be used to apply it to React elements. When a component is built, it is usually assigned to an instance property, which may then be referenced throughout the component.

    class Comp  extends React.Component {  
      constructor(props) {  
        super(props);  
        this.callRef = React.createRef();  
      }  
      render() {  
        return <div ref={this.callRef} />;  
      }  
    }  

How to access Refs?

When a ref is supplied to an element inside a render method in React, the current attribute of the ref can be used to get a reference to the node.

    const value = this.callRef.current;

The ref has a different value depending on the value type:

When the ref attribute is applied to an HTML element, React creates a ref in the function Object() { [native code] }.
The current property of createRef() is the underlying DOM element.
The ref object receives the mounted instance of the component as its current when the ref property is used on a custom class component.
Because function components don't have instances, you can't utilise the ref attribute on them.

Add Ref to DOM elements

We're using a ref to store the reference to a DOM node or element in the example below.

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
    this.Input = this.Input.bind(this);  
  }  
   
  Input() {  
    this.callRef.current.focus();  
  }  
   
  render() {  
    return (  
      <div>  
        <input  
          type="text"  
          ref={this.callRef} />  
        <input  
          type="input"  
          value="Add item"  
          onClick={this.Input}  
        />  
      </div>  
    );  
  }  
}  
export default App; 

Add Ref to Class Components

We're using a ref to store the reference to a class component in the example below.

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.text = React.createRef();  }

  temp() {
    this.text=.current.Input();  }

  render() {
    return (
      <temp ref={this.text=} />    );
  }
}

Exposing DOM Refs to Parent Components

In some unusual instances, a parent component may need access to a child's DOM node. This isn't encouraged because it breaches component encapsulation, although it can be useful for initiating focus or measuring the size or location of a child DOM node on rare occasions.
You could add a ref to the child component, however this isn't the best approach because you'd just get a component instance instead of a DOM node. This would also not work with function components.
For these circumstances, we recommend using ref forwarding if you're using React 16.3 or higher. Components can choose to expose any child component's ref as their own using ref forwarding. The ref forwarding documentation includes a detailed example of how to disclose a child's DOM node to a parent component.
You can use this alternate way to explicitly provide a ref as a distinct named prop if you're using React 16.2 or lower, or if you need more flexibility than ref forwarding provides.

Callback Refs

React also has a method for setting refs known as "callback refs," which allows for greater fine-grained control over when refs are set and unset.
You pass a function instead of a ref attribute produced by createRef(). The argument to the function is a React component instance or an HTML DOM element, which can be kept and referenced elsewhere.
React allows you to generate refs by supplying a callback function to the ref attribute of a component instead of using the createRef() method. It appears to be the code below.

    <input type="text" ref={element => this.callInput = element} />  

The callback function saves a reference to the DOM node in an instance property that may be accessed from anywhere. It can be found at the following address:

       this.callInput.value  

If the ref callback is an inline function, it will be called twice during updates, once with null and once with the DOM element. You can avoid this by making the ref callback a bound method on the class, but in most circumstances, this isn't necessary.

Forwarding Ref from one component to another component

A mechanism for passing a ref across a component to one of its child components is called ref forwarding. The React.forwardRef() method can be used to accomplish this. This method is very beneficial for higher-order components, and it is frequently used in reusable component libraries.

React with useRef()

It is available in React 16.7 and later versions. It assists in gaining access to the DOM node or element, after which we can interact with it by focusing the input element or reading the input element value. It returns the ref object with the supplied argument's.current property set to true. The component's lifespan is extended by the item returned.

const block = useRef(init_value);  

Conclusion:

So there you have it, your journey into the React Refs.Current Properties of the React Ref. We came to know about When to Use Refs, When to not use Refs, How to create Refs, How to access Refs. How to Add Ref to DOM elements and to Class Components. Came up to know about exposing DOM Refs to Parent Components ,Callback Refs and How to use React with useRef().