How to create REFS?

React provides us with createRef(). With the use of that method we can create react refs and then we need to attach the create ref with React elements which can be done using the ref attribute. And for the react functional components, we need to provide the useRef() hook with a null value as the initial value. Most of the time, and we need to assign the refs with instance property which is done when a react component is created such that we can reference them throughout the  react component.

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

Accessing Refs

We can access the reference to the node by passing a react ref to an element in the rendering, and which will then be a accessible at the present attribute of the react ref.

const refNode = this.newRef.current;

Based on the what type of the node the value of react ref will be different. For example, when the react ref attribute is used on the HTML(Hypertext Markup Language) element then ref inside the constructor of createRef() will get the DOM(Document Object Model) element as the ‘current’ property. And for the react custom class component, and  we want to use the react ref attribute then, in this case, the ‘current(present)’ of the react ref object will have the mounted instance of the react component. Also, with react function components, we cannot use the ref attributes since they do not have any instances. Let’s see each and every one of these cases separately.

Adding a Ref to a DOM 

To add ref to a DOM(Document Object Model) element we want to pass the react ref attribute and in this case, the ‘current’ property will be assigned with the DOM(Document Object Model) element when the react component mounts. After that, React will assign the ‘current’ property again to null when the DOM(Document Object Model) element unmounts. And before componentDidMount and componentDidUpdate lifecycle, this update of react ref happens. The example below shows the addition of ref to DOM(Document Object Model) element.

class myComponent extends Component {
  constructor(props) {
    super(props);
    this.refInput = React.createRef(); //create ref
    this.focusInputText = this.focusInputText.bind(this); //to bind this keyword
  }
  focusInputText() {
    this.refInput.current.focus(); // to focus input using DOM API
  }
  render() {
    return (
      <div>
        {/* To associate the refInput in constructor with <input>  */}
        <input type="text" ref={this.refInput} />
        <input type="button" value="Click to Focus input" onClick={this.focusInputText} />
      </div>
    );
  }
}

Adding a Ref to class component

Only when we are using a react class component, if we want to simulate that the ref Input is clicked just after mounting, then in this case, we can call the focusInputText method manually and used the react ref to get access to the myComponent.

class AutoFocusComp extends Component {
  constructor(props) {
    super(props);
    this.refInput = React.createRef(); //create ref
  }
  componentDidMount() {
    this.refInput.current.focusInputText(); //manually call focusInputText method
  }
  render() {
    //to associate the ref with our component
    return (
      <myComponent ref={this.refInput} />
    );
  }
}

Ref with functional components:

We can’t actually directly use the react ref attribute on the react function component since we know that the react function component does not have any instances. So, if we want to use ref we must use the forwardRef, otherwise we need to convert this component to a react class component. But if we just need to refer to the DOM(Document Object Model) element or a class component inside the react function component then in this case, we can use the ref attribute.

function myComponent(props) {
  const refInput = useRef(null); //for functional component we need to use useRef
  function clickHandler() {
    refInput.current.focus(); //to focus input
  }
  return (
    <div>
      {/* To associate the refInput in constructor with <input>  */}
      <input type="text" ref={refInput} />
      <input type="button" value="Click to Focus input" onClick={clickHandler} />
    </div>
  );
}