How to create refs in React JS? (original) (raw)

Last Updated : 04 Dec, 2023

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:

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

The following examples are based on only Functional-Components:

Table of Content

**Method 1: Using **React.createRef().

**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 ( 

  {/** 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.

**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 ( 

  {/** 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: