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:
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