Refs in react are one of those concepts that can seem simple at first glance, pretty easy after reading some articles, and something that raises some serious "maybe React is not for me" while working with them 😭.

Table of Contents

• Intro
• What ?
• When ?
• How ?
• Final Thoughts !

Intro

A lot of online tutorials around refs start by stating some like "refs can be used to manipulate the DOM" which is not entirely false, but for a beginner in React it may set some wrong impressions about its usage and can lead to some design flaws in future React projects.

🌟 So in this article, you will get a real-world usage of ref, and will learn when to use the power of refs 🥳.

WHAT 🤯

So what are Refs ?

To keep it simple, refs are
- something that stores the reference(of DOM nodes ) or
- can be used to store 'data' that we want to persist at renders.

I know the first line seems a bit fraudulent since I had warned against the very same type of tutorials that start off with refs and DOM manipulation😆, but keep reading ahead and It will make sense .

WHEN 🤯

The react docs provides some guidance on when to use them.

• Manage focus, text selection, or media playback
• perform imperative animations
• integrate with third-party DOM libraries.

Apart from these, some other use cases maybe

• working with HTML canvas or media elements.

One important thing to remember is, React is declarative while working with refs, and accessing DOM nodes is imperative, so we use them only if it's absolutely necessary.

An example is,
Updating the background color of a div, in response to a click event.

In this scenario, you should pass a backgroundColour prop to your component, instead of exposing a changeBackground() method (which you then call via access to a Ref) on it. Credits - Nana Ewusi

How 🤯

Let us understand them by looking at a simple example,

What we want to achieve -
When a user clicks a button, we want a particular input box to be focused.

useRef(initialValue) is a React hook that returns a ref for you to work with.

In the above code, we have created a ref called "myRef" and have set the default value to null. Now, If you console.log(myRef) you'll get {current : null } .
Try understanding it like this, myRef is an object with a property called current whose value is now null. We store the 'data'in the current property while working with refs.

Before you start questioning the point of doing so much work just to save a value, keep reading ahead and you'll understand. Just remember - 'refs don't cause a component to re-render when changed'.

Let us understand the code, we use the 'ref' property on the input element to set the current value of myRef to the input element. If you console.log(myRef) after that line you'll understand what the above line means.

Now when we click on the button, it will call the focusInputOnClick function which uses the current value of myRef variable (that has the DOM node of input) and sets the focus on the input element.

Final Thoughts 😎🥳

Refs are a really great tool that React provides us to work with. But always remember to use them only if it is absolutely necessary.

If you want to see another use of React Refs, go to my blog and look for 👉 "Making a Drawing board using the Canvas API" that will be released by November 2021.

This article assumes you to be a beginner in React, If you want some in-depth articles on Refs, something more advanced. You can refer to the OG 👉 Robin Rwieruch .

Difference between declarative and imperative ? 👉 StackOverflow

Give me a follow on Hashnode and Twitter if you enjoyed this article 😊😊