How to create refs in ReactJS?

25 Jan, 2021
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 Reactimport * 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 Reactimport * 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 Reactimport * 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:
Picked
Technical Scripter 2020
JavaScript
ReactJS
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.