React - useRef
Tags: react, webdev, javascript, tutorial
Published: 2023-09-26 17:58:03

## Summary

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

---

<span id="1"><span>
## 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.

---

<span id="2"><span>
1. **Understand what `useRef` does**

First, I would like that you read the docs of this topic [here](https://react.dev/reference/react/useRef#), 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](https://developer.mozilla.org/en-US/docs/Web/API/Element) that allows access to their methods and properties

---

<span id="3"><span>
## 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](https://react.dev/learn/rendering-lists). 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](https://react.dev/learn/rendering-lists#where-to-get-your-key).

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

Libraries like [react-sortablejs](https://www.npmjs.com/package/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 `key`property makes noice (at least to me) on the properties of the object, like, what does it means `key`, what's his purpose on this?

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt7jt7fwn12f85y8funm.png)

I refuse to do this, but it works

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n62y4iq6ikfcos7tm6f0.png)

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

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1h1bot7ccvbxrgkue1r.png)

### 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.

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awq193tjio6d7y7z37ci.png)

---

<span id="4"><span>
## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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`

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su6xvk747k369l6npgjz.png)

---

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

`App.tsx`

![code_example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33f68qp6f6gf1ylmr012.png)

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](https://caniuse.com/dialog).

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

<span id="5"><span>
### Recommended readings

* [forwardRef](https://es.react.dev/reference/react/forwardRef)
* [HOC](https://dev.to/almonteluis/mastering-higher-order-components-in-react-js-a-comprehensive-guide-oh7)