useRef es una función de React Hooks que te permite crear una referencia a un elemento del DOM en un componente de React. Una referencia es simplemente una forma de guardar una referencia al elemento del DOM en una variable, para que puedas acceder y manipularlo más tarde.
Por ejemplo, puedes usar useRef para guardar una referencia a un elemento de entrada de texto y luego utilizar esa referencia para limpiar el valor de ese campo después de que el usuario haya enviado un formulario:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { useRef } from 'react';function Form() { const inputRef = useRef(null); function handleSubmit(event) { event.preventDefault(); inputRef.current.value = ''; } return ( <form onSubmit={handleSubmit}> <input ref={inputRef} type="text" /> <button type="submit">Submit</button> </form> );} |
En este ejemplo, se crea una referencia a inputRef utilizando useRef y se le pasa null como valor inicial. Luego se asigna esta referencia al elemento de entrada <input> mediante la propiedad ref. Al enviar el formulario, el evento onSubmit activa una función manejadora en la que se accede al valor actual de inputRef.current y se limpia.
useRef también es útil si necesitas guardar una referencia a un objeto o una función en un componente de React, en lugar de un elemento del DOM. Por ejemplo, puedes guardar una referencia a una instancia de una clase o a un objeto de configuración, y luego acceder a él desde diferentes lugares en tu componente.
https://latteandcode.medium.com/react-el-hook-useref-6e20f026d5b
https://keepcoding.io/blog/para-que-sirven-las-refs-en-react/
https://keepcoding.io/blog/useref-en-react/
https://beta.reactjs.org/reference/react/useRef
