Understanding React Refs: A Complete Guide

Introduction

In React, refs (short for “references”) provide a way to directly access and interact with DOM elements or React components. They are a valuable tool for handling scenarios where controlled components or React’s declarative approach may not be the best fit.

In this blog, we’ll explore the concept of React refs, their use cases, and how to use them effectively.

What Are React Refs?

React refs are a feature that allows you to reference a DOM element or a React component created within the render method. They enable direct interaction without relying on state or props.

Refs are created using the React.createRef() function or the useRef hook in functional components.

How to Create and Use Refs

1. Creating Refs in Class Components

In class components, refs are typically created in the constructor and attached to a DOM element in the render method.

import React, { Component } from 'react';

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

  componentDidMount() {
    // Accessing the DOM element
    this.myRef.current.focus();
  }…