Open In App

How to create refs in React JS?

Improve
Improve
Like Article
Like
Save
Share
Report

React JS, a powerful and declarative JavaScript library for building user interfaces, provides a feature known as “refs” that allows developers to interact with the underlying DOM elements directly.

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:

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

Example: Below is the code example of the React.createRef().

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;


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

npm start

Output:

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.

Example: Below is the code example of the useRef().

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;


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

npm start

Output:

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.

Example: Below is the code example of the callback Ref().

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:



Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads