Skip to content
Related Articles

Related Articles

How to create refs in ReactJS?
  • Last Updated : 25 Jan, 2021
GeeksforGeeks - Summer Carnival Banner

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :