react refs

What is REFS in React? Should we use REFS in our Application?

The ref is used to return a reference to the element. Refs should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components.

refs are escape hatches for React developers, and we should try to avoid using them if possible. When we obtain a node by using a ref and later modify some attribute or the DOM structure of it, it can enter into conflict with React’s diff and update approaches.

When to Use Refs:

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

Why we need to use Refs:

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all.

Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow, props are the only way that parent components interact with their children.

Creating Refs:

Refs are escape hatches for React developers, and we should try to avoid using them if possible.

When we obtain a node by using a ref and later modify some attribute or the DOM structure of it, it can enter into conflict with React’s different and update approaches. We’re going to cover anti-patterns later in this article. First, let’s start with a simple component and grab a node element using refs.

import React from 'react'

class ActionButton extends React.Component {

  render() {
    const { label, action } = this.props
    return (
      <button onClick={action}>{label}</button>
    )
  }
}

The <button> expression here is actually the JSX way of calling the React.createElement('button') statement, which is not actually a representation of an HTML Button element — it’s a React element.

You can gain access to the actual HTML element by creating a React reference and passing it to the element itself.

import React, { createRef } from 'react'

class ActionButton extends React.Component {

  constructor() {
    super()
    this.buttonRef = createRef()
  }

  render() {
    const { label, action } = this.props
    return (
      <button onClick={action} ref={this.buttonRef}>{label}</button>
    )
  }
}

This way, at any time in the lifecycle of the component, we can access the actual HTML element at this.buttonRef.current.

But what about functions that act as components?

Recently, the React team released Hooks to pair them with the same features class components have.

We can now import useRef for refs inside function components as well.

import React, { useRef } from 'react'

function ActionButton({ label, action }) {
    const buttonRef = useRef(null)

    return (
      <button onClick={action} ref={buttonRef}>{label}</button>
    )
  }
}

We know how to access DOM nodes inside a React component. Let’s take a look at some of the situations where this may be useful.

Should I use refs in react?

While you could add a ref to the child component, this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn’t work with function components. If you use React 16.3 or higher, we recommend to use ref forwarding for these cases.

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all.

Also, how do you pass refs in react? We define a ref in the component that needs the ref and pass it to the button component. React will pass the ref through and forward it down to <button ref={ref}> by specifying it as a JSX attribute. When the ref is attached, ref. current will point to the <button> DOM node.

Likewise, people ask, are refs bad react?

According to official react docs , Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future.

What does react createRef do?

Creating Refs — Using ReactcreateRef() and attach them to React elements via the ref attribute. Essentially, you assign the Ref returned from ReactcreateRef() to an instance property, when a component is constructed (aka, in the component’s constructor). This way, the Ref can be referenced throughout the component.

73 thoughts on “What is REFS in React? Should we use REFS in our Application?

Comments are closed.