ReactJS Refs (original) (raw)

Last Updated : 09 Jan, 2025

**ReactJS Refs are used to access and modify the **DOM elements in the React Application. It creates a reference to the elements and uses it to modify them.

Table of Content

Creating refs in React
Accessing Refs in React
Why useRef over createRef in Function Components?
When to use refs
When not to use refs

**What is Refs in React?

**Refs are a function provided by **React to access the **DOM element and the React elements created in **components. They are used in cases where we want to change the value of a child component, without making use of **props and **state.

They allow us to interact with these elements outside the typical rendering workflow of React.

They have wide functionality as we can use **callbacks with them.

Creating refs in React

ReactJS Refs can be created using **React.createRef()function and attached to a React element via the **ref attribute.

When a class component is constructed, the Refs are **commonly assigned to an **instance property so that they can be referenced in the component.

Example

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myCallRef = React.createRef();
}
render() {
return

;
}
}

**Detailed guide on **How to create refs in React JS?

**Accessing Refs in React

In React, when a ref is passed to an element in render using the ref attribute, the underlying DOM element or React component becomes accessible at the current property of the ref.

const node = this.myCallRef.current;

Now, we are going to see how we can use _refs in our code which will help you to understand the use case of _refs better.

**Example

In this example, we use the target value of event e, for getting the value.

JavaScript `

// Filename - App.js

// without refs class App extends React.Component { constructor() { super(); this.state = { sayings: "" }; } update(e) { this.setState({ sayings: e.target.value }); } render() { return (

Mukul Says{" "}
{this.state.sayings}

); } } ReactDOM.render(, document.getElementById("root"));

**Output:

accessing refs in react example

Refs Current Properties

The current property value of refs depends on the **ref target. Look at the table below, to understand the difference.

Target Type	current Property Value
HTML element	DOM element object
Custom React component (class component)	React component instance

**More Examples of Refs in React

Let's look at some of the React code examples of refs. The examples will provide a better learning experience for master ReactJS refs.

**Example 1: In this example, we use refs to add a callback function indirectly with the help of the **update function and onChange event handler.

JavaScript `

// using refs class App extends React.Component { constructor() { super(); this.state = { sayings: "" }; } update(e) { this.setState({ sayings: this.refs.anything.value }); } render() { return (

Mukul Says
{this.state.sayings}

); } } ReactDOM.render(< App />, document.getElementById('root'));

**Output:

add a callback function with refs example output

**Example 2: In this example, we directly define callback function within ref.

JavaScript `

// Filename - App.js

// callback used inside ref class App extends React.Component { constructor() { super(); this.state = { sayings: "" }; } update(e) { this.setState({ sayings: this.a.value }); } render() { return (

Mukul Says{" "} <input type="text" ref={(call_back) => { this.a = call_back; }} onChange={this.update.bind(this)} />
{this.state.sayings}

); } } ReactDOM.render(, document.getElementById("root"));

**Output:

Why useRef over createRef in Function Components?

For overcome the disadvantages of createref, prefer useRef. It is a type of hook used to create a reference that hold a value. when updated this value by using function component then does not re-render so that avoid unnecessary re-renders and optimize performance. It store mutable value that persists across renders unlike ref.

JavaScript `

import { useRef } from 'react'; const Refs = ()=>{

let demoRef = useRef(null);
function change(){
    console.log(demoRef.current);
    demoRef.current.style.backgroundColor="yellow";
}

return (
    <div>
      <h1 ref={demoRef} > Change Color <h1/>
      <button onClick={change}>Change</button>
    </div>
  );

};

Basically createRef is designed for class components. In every render, create a new reference by createRef which is not suitable for function component.

**When to use refs

Using refs provides a lot of benefits, and improves your web development experience. It is helpful in:

Helpful when using third-party libraries.
Helpful in animations.
Helpful in managing focus, media playback, and text selection.

**When not to use refs

Should not be used with functional components because they don't have instances.
Not to be used on things that can be done declaratively.
When using a library or framework that provides its methods for managing such as Redux or MobX.

Conclusion

React refs are useful to interact with the DOM structure of components. They can directly access and manipulate the DOM elements. This guide teaches the purpose of refs in React, how to create refs, and how to use refs in React with examples.