How to create refs in ReactJS?

Namachila 2 weeks ago

0 0 3 minutes read

Creating refs in ReactJS is very simple. Refs are generally used for the following purposes:

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

Note: You should avoid using refs for anything that can be done declaratively.

The following examples are based on only Functional-Components but you are free to use Class-Components as well.

Method 1: Using React.createRef(). It was introduced in React 16.3.

Create a ref variable using React.createRef()
Use the element’s ref attribute to attach the ref variable

Filename: App.js

Javascript

// Importing everything as React 
import * as React from "react"; 
  
const App = () => { 
  // Creating textInputRef variable 
  const textInputRef = React.createRef(); 
  
  // This method will be used to focus textInput 
  const textInputFocusHandler = () => { 
    // Focusing input element 
    textInputRef.current.focus(); 
  }; 
  
  return ( 
    <div> 
        
      {/** Attaching ref variable using element's ref attribute */} 
      <input ref={textInputRef} type="text" 
             placeholder="Enter something" /> 
  
      {/** Attaching textInputFocusHandler method to button click */} 
      <button onClick={textInputFocusHandler}> 
             Click me to focus input 
      </button> 
    </div> 
  ); 
}; 
  
export default App; 

Method 2: Using useRef() hook.

Create a ref variable using React.useRef()
Use the element’s ref attribute to attach the ref variable
The benefit of using useRef() over createRef() is that it’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.
useRef() also takes an initial value.

Filename: App.js

Javascript

// Importing everything as React 
import * as React from "react"; 
  
const App = () => { 
  // Creating textInputRef variable with initialValue "null" 
  const textInputRef = React.useRef(null); 
  
  // This method will be used to focus textInput 
  const textInputFocusHandler = () => { 
    // Focusing input element 
    textInputRef.current.focus(); 
  }; 
  
  return ( 
    <div> 
        
      {/** Attaching ref variable using element's ref attribute */} 
      <input ref={textInputRef} type="text" 
             placeholder="Enter something" /> 
  
      {/** Attaching textInputFocusHandler method to button click */} 
      <button onClick={textInputFocusHandler}> 
              Click me to focus input 
      </button> 
    </div> 
  ); 
}; 
  
export default App; 

Method 3: Using callback ref. This method was used prior to React 16.3. So if you are using React < 16.3 use this method.

Creating ref using this method is a bit different than the other two methods. Instead of passing a ref attribute created using createRef() or useRef() we pass a function. The function receives the React element or HTML DOM element as an argument, which can be used.

Filename: App.js

Javascript

// Importing everything as React 
import * as React from "react"; 
  
const App = () => { 
  // Creating and initializing textInputRef variable as null  
  let textInputRef = null; 
  
  // Callback function that will set ref for input field 
  // Note: It can be used to set ref for any element 
  const setTextInputRef = (element) => { 
      textInputRef = element; 
  }; 
  
  // This method will be used to focus textInput 
  const textInputFocusHandler = () => { 
  
    // If textInputRef is not null 
    // otherwise it will throw an error 
    if (textInputRef) { 
      
      // Focusing input element 
      textInputRef.focus(); 
    } 
  }; 
  
  return ( 
    <div style={{ padding: 16 }}> 
      {/** Using setTextInputRef function so that 
       *   textInputRef can be set as ref for this input field 
       * */} 
      <input 
        style={{ display: "block" }} 
        ref={setTextInputRef} 
        type="text"
        placeholder="Enter something"
      /> 
  
      {/** Attaching textInputFocusHandler  
           method to button click */} 
      <button onClick={textInputFocusHandler}> 
          Click me to focus input 
      </button> 
    </div> 
  ); 
}; 
  
export default App; 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!