What is Ref and Ref Callback in React?

Disclaimer: All the information below given are based on my experience and knowledge, it may have some mistakes and I’m not liable for any loss due to that. Please let me know if you have found out any mistakes in the comment section.

Hi there, I hope you have at-least basic knowledge in React JS.

What is Ref ?

In React ref is an object, which have reference to a React element, which is used to manipulate the DOM elements manually. Refs are most commonly used to add animations, managing values in form elements and in some third party libraries.

Before deep diving into ref, let’s see how a basic implementation in react looks like.

import {useRef, useEffect} from "react";

function App() {

  const userNameRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if(userNameRef.current) {
            userNameRef.current.focus()
        }
    }, []);

  return (
    <div>
        <form>
            <div>
                <label htmlFor='username'>Username</label>
                <input ref={userNameRef} id='username' type='text'/>
            </div>
            <div>
                <label htmlFor='password'>Password</label>
                <input id='password' type='password'/>
            </div>
            <button>
                Submit
            </button>
        </form>
    </div>
  )
}

export default App

This React code defines a functional component named App representing a simple form with username and password inputs. The useRef hook creates a ref object named as userNameRef with initial value as null. Then we pass that userNameRef to ref prop of the username input element, which creates a reference to it.

The useEffect is triggered when the component mounts (empty dependency array []). It checks if userNameRef.current is not null (i.e., if the username input element exists), and if so, it sets the focus on that input element using userNameRef.current.focus() .

Ref Callback

There is an another way to use ref in React, that is using Ref Callback Funtion. Instead of using useRef() hook, we can directly pass a function to the ref prop of the JSX element, in which the function takes the HTMLElement as the parameter. So that we can access the element directly from the parameter inside the callback function. Usually this callback method of creating a ref is used where we often add or remove elements dynamically in React.

Note: This function will be called twice because, initally react assigns null to the ref element, then after mounting it will assigns the element to it. So there is no need of useEffect hook to execute the focus functionality.

Look at the code example below, it’s just the same logic that what we seen before on the top, but implemented using ref callback instead of using useRef hook.

function App() {

  function handleRef(element: HTMLInputElement) {
      if(element) {
          element.focus();    
      }
  }

  return (
    <div>
        <form>
            <div>
                <label htmlFor='username'>Username</label>
                <input ref={handleRef} id='username' type='text'/>
            </div>
            <div>
                <label htmlFor='password'>Password</label>
                <input id='password' type='password'/>
            </div>
            <button>
                Submit
            </button>
        </form>
    </div>
  )
}

export default App

Summary

`Refs` are very powerful tool in React, which enables us to easily attach animations, accessing values and triggering events etc just like we normally did in Plain JS.

Overuse of `refs` causes performance issues. So it is recommended to use state based controls over the elements.

Still it is encouraged to use ref for form elements, technically called as uncontrolled forms, which in contrast improves the performance of the application.

There is a library called React Hook Form, which is a great way for creating uncontrolled forms.