React Refs

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.

When to Use Refs

Refs can be used in the following cases:

  • When we need DOM measurements such as managing focus, text selection, or media playback.
  • It is used in triggering imperative animations.
  • When integrating with third-party DOM libraries.
  • It can also use as in callbacks.

When to not use Refs

  • Its use should be avoided for anything that can be done declaratively. For example, instead of using open() and close() methods on a Dialog component, you need to pass an isOpen prop to it.
  • You should have to avoid overuse of the Refs.

How to create Refs

In React, Refs can be created by using React.createRef(). It can be assigned to React elements via the ref attribute. It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.

snippet
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.callRef = React.createRef();
  }
  render() {
    return 
; } }

How to access Refs

In React, when a ref is passed to an element inside render method, a reference to the node can be accessed via the current attribute of the ref.

snippet
const node = this.callRef.current;

Refs current Properties

The ref value differs depending on the type of the node:

  • When the ref attribute is used in HTML element, the ref created with React.createRef() receives the underlying DOM element as its current property.
  • If the ref attribute is used on a custom class component, then ref object receives the mounted instance of the component as its current property.
  • The ref attribute cannot be used on function components because they don't have instances.

Add Ref to DOM elements

In the below example, we are adding a ref to store the reference to a DOM node or element.

snippet
import React, { Component } from 'react';
import { render } from 'react-dom';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.callRef = React.createRef();
    this.addingRefInput = this.addingRefInput.bind(this);
  }
 
  addingRefInput() {
    this.callRef.current.focus();
  }
 
  render() {
    return (
      

Adding Ref to DOM element

); } } export default App;

Output

React Refs

Add Ref to Class components

In the below example, we are adding a ref to store the reference to a class component.

Example

snippet
import React, { Component } from 'react';
import { render } from 'react-dom';
 
function CustomInput(props) {
  let callRefInput = React.createRef();
 
  function handleClick() {
    callRefInput.current.focus();
  }
 
  return (
    

Adding Ref to Class Component

); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

Output

React Refs

Callback refs

In react, there is another way to use refs that is called "callback refs" and it gives more control when the refs are set and unset. Instead of creating refs by createRef() method, React allows a way to create refs by passing a callback function to the ref attribute of a component. It looks like the below code.

snippet
 this.callRefInput = element} />

The callback function is used to store a reference to the DOM node in an instance property and can be accessed elsewhere. It can be accessed as below:

snippet
this.callRefInput.value

The example below helps to understand the working of callback refs.

snippet
import React, { Component } from 'react';
import { render } from 'react-dom';
 
class App extends React.Component {
    constructor(props) {
    super(props);

    this.callRefInput = null;

    this.setInputRef = element => {
      this.callRefInput = element;
    };

    this.focusRefInput = () => {
      //Focus the input using the raw DOM API
      if (this.callRefInput) this.callRefInput.focus();
    };
  }

  componentDidMount() {
    //autofocus of the input on mount
    this.focusRefInput();
  }

  render() {
    return (
      

Callback Refs Example

); } } export default App;

In the above example, React will call the "ref" callback to store the reference to the input DOM element when the component mounts, and when the component unmounts, call it with null. Refs are always up-to-date before the componentDidMount or componentDidUpdate fires. The callback refs pass between components is the same as you can work with object refs, which is created with React.createRef().

Output

React Refs

Forwarding Ref from one component to another component

Ref forwarding is a technique that is used for passing a ref through a component to one of its child components. It can be performed by making use of the React.forwardRef() method. This technique is particularly useful with higher-order components and specially used in reusable component libraries. The most common example is given below.

Example

snippet
import React, { Component } from 'react';
import { render } from 'react-dom';

const TextInput = React.forwardRef((props, ref) => (
  
));

const inputRef = React.createRef();

class CustomTextInput extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };
  render() {
    return (
      
this.handleSubmit(e)}>
); } } export default App;

In the above example, there is a component TextInput that has a child as an input field. Now, to pass or forward the ref down to the input, first, create a ref and then pass your ref down to <TextInput ref={inputRef}>. After that, React forwards the ref to the forwardRef function as a second argument. Next, we forward this ref argument down to <input ref={ref}>. Now, the value of the DOM node can be accessed at inputRef.current.

React with useRef()

It is introduced in React 16.7 and above version. It helps to get access the DOM node or element, and then we can interact with that DOM node or element such as focussing the input element or accessing the input element value. It returns the ref object whose .current property initialized to the passed argument. The returned object persist for the lifetime of the component.

Syntax

snippet
const refContainer = useRef(initialValue);

Example

In the below code, useRef is a function that gets assigned to a variable, inputRef, and then attached to an attribute called ref inside the HTML element in which you want to reference.

snippet
function useRefExample() {
  const inputRef= useRef(null);
  const onButtonClick = () => {
    inputRef.current.focus();
  };
  return (
    <>
      
      
    
  );
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +