How to use useRef React hook

Introduction

UseRef is a React hook that works very similarly to the well-known useState. The main difference is that useRef avoids unnecessary component re-rendering.

UseRef is used when we need to perform constant updates to a given variable or element without having to re-render the component with each update. Therefore, it works well when visual changes are not necessary; in this case, useState would be more efficient.

Diference between useRef and useState

• useState: Used to manipulate states in a component. Whenever the state changes, the component is re-rendered.

• useRef: Used to store the reference to a variable or DOM element. This allows you to "save" your last update, re-rendering the component only when it needs to display that value on the screen.

Sintaxe do useRef

const exampleRef = useRef('default value')
// useRef returns an object with item "current" that have the latest update of this constant.

// To access this value:
console.log('This is the value inside exampleRef: ', exampleRef.current)

Short Example

Let's look at a practical application example.

The system below allows farmers to record the number of seeds planted. There are two use cases:

1 - The farmer adds the number of seedlings planted by clicking the "Add +1 seedling" button and can view this in real time.

2 - The farmer adds the number of seedlings planted and, when necessary, can see how many seedlings have already been planted by clicking the "View number of seedlings added" button.

In the first case, we'll use the "UseStateExample" component, which uses the useState hook to track the number of seeds the farmer adds.

If you open the console, you'll see that clicking the "Add +1 seedling" button re-renders the entire component because the state changes.

But in the second case, when you open the console, you'll see that the "UseRefExample" component only renders once, regardless of how many times you click the buttons. This happens because we are updating the values ​​using useRef.

We can also use useRef to reference DOM elements, in order to store a persistent reference to a DOM element, for example inputs, canvas, div, etc.

See the example below, where useRef was used to manipulate the focus of an input without necessarily having to re-render it.

Simple Analogy

I like to use practical examples related to agriculture, so to illustrate how useRef works, imagine that you have several plants in a greenhouse and have identified a plant suffering from a pest attack. You can't lose sight of it, as it will need treatment later.

So, you take a Post-it note and stick it on that plant. This Post-it note doesn't change the plant, it doesn't interfere with the treatment, it doesn't redecorate the entire greenhouse, and it doesn't interfere with other plants. It simply gives you a "direct shortcut" to quickly find that plant when you need it.

In our case, the Post-it note is the useRef. It's "stuck" to the DOM element, and whenever you want to interact with it, just look at the Post-it note and you'll identify and access it.