React - useRef

Summary

1. Objective
2. Understand what useRef does
3. Example with Rendering List
4. Example with HTML Dialog Element (Modal)
5. Recommended readings

---

Objective

Understand the userRef hook and use it on a example to put knowledge on practice. And share my experience with other people.

I'll organize each point of this post with bullets, so you can follow what's my purpose as you read each point.

---

1. Understand what useRef does

First, I would like that you read the docs of this topic here, but, in a few words (and with my understanding of the read)

a) useRef stores a variable that do not follows the re-rendering of the app, meaning that his value won't change until you actually do it manually (in a useEffect , on a function execution, etc), is not recommended to save information that relies on other states to apply business logic since his value will reamin static on each render
b) useRef can be link to a DOM element of the UI which returns a Element that allows access to their methods and properties

---

Example with case A (Rendering list)

• Problem: When rendering a list of items on react, a unique value is needed, more about this on the link. However, what the docs tell you is that this unique value needs to be static AND mustn't be created while rendering. React recommends this solution.

I'm gonna explain more with this example and why this is important.

Libraries like react-sortablejs needs an id on the children elements that will have the sortable behavior. But, if you apply the react solution using native solutions like window.crypto.randomUUID() you may have the issue that when you do something on the app (drag and drop for example) the entire app will re-render (that's how react works) and will change the key of your rendering-lists since the the crypto function is gonna execute over and over because it's a function execution, the Virtual Dom will make that the drag and drop resets

Solution

1) Execute the crypto function on the useEffect that fetches your rendering-list. (avoiding create keys while rendering)

I don't do this because having a keyproperty makes noice (at least to me) on the properties of the object, like, what does it means key, what's his purpose on this?

I refuse to do this, but it works

And, if you want to avoid add the key property on the useEffect executing the function on the key property for rendering list, you're wrong

Solution

2) Another aproach is using useRef to avoid having a key property on my object. So I can keep more cleaner my object with only the information that's needed.

---

Example with case B (Manipulate DOM to create a modal)

• Problem: When creating a modal in react there's some considerations in order to create it, like:

1. Must overlap all the elements behind, being on the top of the top
2. Must be set on a position (normally on the center on the screen or full screen for mobile)
3. Configure some accesibility like Esc key to exit modal

Solution

1) To avoid an overhead programming all those features from scratch or using frameworks like bootstrap. It's time to use the dialog html element and useRef to manipulate the element on the DOM.

First of all, create a hook to manipulate the dialog element thorught the DOM

useDialog/index.ts

---

Then, the hook can be used to create modal withouht any struggle

App.tsx

A Dialog component can be created to set css styles, a footer, header, body, responsive design, etc. Also, the hook can be used apart from the Dialog component that can be created in order to click any html element to open the modal, even programitically. In this way, to manipulate the modal is not hook to a button on the UI.

This HTML Element has a 92% of support on the most important browsers. Compatibility here.

Something to take care, is that this dom element ignores de z-index on css. Meaning, if you have elements that depends on that property, it won't work inside the dialog.

---

The codes are pretty simple, but of course using HOC and splitting the code into custom hooks or smaller components are recommended in case that the example need to be completed for real purposes. I recommend the following links to know more about these topics that are needed for complete codes

Recommended readings

• forwardRef
• HOC