Refs and useRef hook

After creating a ref object using the useRef hook, you can set it as the value of a ref attribute of an element you want to reference.

When you want a component to “remember” some information, but you don't want that information to trigger new renders, you can use a ref.

Perhaps the best way to describe a ref is as a bridge; a bridge that allows a component to access or modify an element the ref is attached to. Using refs gives us a way to access elements while bypassing state updates and re-renders; this can be useful in some use cases, but should not be used as an alternative to props and state as stated in the official React docs.

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

When to use refs

Typically, you will use a ref when your component needs to “step outside” React and communicate with external APIs - often a browser API that won't impact the appearance of the component. They are used for references in React, to store a reference to particular DOM nodes or React elements, to access React DOM nodes or React elements, to interact with React DOM nodes or React elements, and to change the value of a child component, without using props.

useRef and createRef

When working with class-based components, we use createRef() to create a ref. However, now that React recommends functional components and general practice is to follow the hooks way of doing things, we don't need to use createRef(). Instead, we use useRef() to create refs in functional components.

The first difference between useRef and createRef is that createRef is typically used when creating a ref in a class component while useRef is used in function components. Additionally, createRef returns a new ref object each time it is called while useRef returns the same ref object on every render.

Another main difference is that createRef doesn't accept an initial value, so the current property of the ref will be initially set to null. On the other hand, useRef can accept an initial value and the current property of the ref will be set to that value.

Adding a ref to your component

Class component

class MyComponent extends React.Component {
 constructor(props) {
   super(props)
   this.myRef = React.createRef();
 }
 ...
 render() {
   return (
     <input
        name="email"
        onChange={this.onChange}
        ref={this.myRef}
        type="text"
    />
   )
 }
}

Functional component

You can add a ref to your component by importing the useRef Hook from React:

import { useRef } from 'react';

Then, use it to declare a ref inside your component:

const myRef = useRef(null);
.
.
.
<input ref={myRef}/>

useRef returns an object like this:

{
  current: null; // The value you passed to useRef
}

Refs and the DOM

You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input. When you pass a ref to a ref attribute in JSX, like <input ref={myRef}>, React will put the corresponding DOM element into myRef.current.

The useRef hook returns an object with a single property called current. Initially, myRef.current will be 0. When React creates a DOM node for this <input>, React will put a reference to this node into myRef.current. You can then access this DOM node from your event handlers and use the built-in browser APIs defined on it.

// You can use any browser APIs, for example:// inputRef.current.focus();
import { useRef } from 'react';
export default function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

Accessing another component’s DOM nodes

If you try to put a ref on your own component, by default you will get null. Here is an example demonstrating it where clicking the button does not focus the input.

import { useRef } from 'react';
 
function MyInput(props) {
  return <input {...props} />;
}
 
export default function MyForm() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

and it will throw an error in the console while the app is rendering:

This happens because by default React does not let a component access the DOM nodes of other components.

Instead, components that want to expose their DOM nodes have to opt into that behavior. A component can specify that it “forwards” its ref to one of its children. Here’s how MyInput can use the forwardRef API:

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

Ref forwarding is a technique to automatically pass a ref to a child component, allowing the parent component to access that child component’s element and read or modify it in some way.

Differences between refs and state

Perhaps you’re thinking refs seem less “strict” than state - you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you will want to use state. Refs are an “escape hatch” you won’t need often. Here’s how state and refs compare:

Best practices for refs

Following these principles will make your components more predictable:

• Treat refs as an escape hatch. Refs are useful when you work with external systems or browser APIs. If a lot of your application logic and data flow relies on refs, you might want to rethink your approach.
• Don’t read or write ref.current during rendering. If some information is needed during rendering, use state instead. Since React doesn’t know when ref.current changes, even reading it while rendering makes your component’s behavior difficult to predict. (The only exception to this is code like if (!ref.current) ref.current = new Thing() which only sets the ref once during the first render.)

useImperativeHandle hook

useImperativeHandle is a React Hook that lets you customize the handle exposed as a ref.

useImperativeHandle(ref, createHandle, dependencies?)

Call useImperativeHandle at the top level of your component to customize the ref handle it exposes:

import { forwardRef, useImperativeHandle } from 'react';
 
const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(
    ref,
    () => {
      return {
        // ... your methods ...
      };
    },
    []
  );
});

Parameters:

• ref: The ref you received as the second argument from the forwardRef render function,
• createHandle: A function that takes no arguments and returns the ref handle you want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose,
• optional dependencies: The list of all reactive values referenced inside of the createHandle code. Reactive values include props, state, and all the variables and functions declared directly inside your component body

Usage

Exposing a custom ref handle to the parent component

By default, components don’t expose their DOM nodes to parent components. For example, if you want the parent component to have access to the DOM node, you have to opt in with forwardRef . Like this, a ref to the parent component will receive the DOM node. However, you can expose a custom value instead. To customize the exposed handle, call useImperativeHandle at the top level of your component.

In case you don’t want to expose the entire DOM node you can use useImperativeHandle to expose a handle with only the methods that you want the parent component to call as below:

import { forwardRef, useRef, useImperativeHandle } from 'react';
 
const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(
    ref,
    () => {
      return {
        focus() {
          inputRef.current.focus();
        },
        scrollIntoView() {
          inputRef.current.scrollIntoView();
        },
      };
    },
    []
  );
  return <input {...props} ref={inputRef} />;
});

Exposing your own imperative methods

The methods you expose via an imperative handle don’t have to match the DOM methods exactly. For example, this Post component exposes a scrollAndFocusAddComment method via an imperative handle. This lets the parent Page scroll the list of comments and focus the input field when you click the button.

import { useRef } from 'react';
import Post from './Post.js';
 
export default function Page() {
  const postRef = useRef(null);
 
  function handleClick() {
    postRef.current.scrollAndFocusAddComment();
  }
 
  return (
    <>
      <button onClick={handleClick}>Write a comment</button>
      <Post ref={postRef} />
    </>
  );
}

Reference

• Referencing Values with Refs – React
• Manipulating the DOM with Refs – React
• React useRef() Hook Explained in 3 Steps
• A complete guide to React refs - LogRocket Blog
• Refs in ReactJS
• React Ref: A Complete Guide with Examples - CopyCat Blog
• How to Use React Refs
• useImperativeHandle – React