useRef: manejo profesional de inputs y formularios

Creo que el profesor deberia explicar mejor como funciona useRef. Solo explica como usarlo pero no como funciona y creo que eso es muy importante.

Apuntes

• Manejo profesional de inputs y formularios

Creación de la referencia

const refContainer = useRef(initialValue);

Uso de la referencia

<input
  type="text"
  value={search}
  ref={searchInput}
  onChange={handleSearch}
/>

useRef.- devuelve un objeto ref mutable cuya propiedad .current se inicializa con el argumento pasado (initialValue). El objeto devuelto se mantendrá persistente durante la vida completa del componente

Referencias

https://es.reactjs.org/docs/hooks-reference.html#useref

RESUMEN: use ref nos sirve para obtener un elemento del DOM construido por React de tal forma que podamos acceder a sus atributos de una forma imperativa

Bueno, lo que comprendo de la clase es, ahora usa useRef para acceder al valor del input. He investigado y parece ser que con useRef puedes obtener elementos del dom y modificarlos (sin tanto problemas de bugs). Es por eso que el profesor hizo el ref={searchInput} para que react supiera que ahora searchInput equivalía al input(un nodo del dom). Sabiendo esto, por eso a la función handleSearch le cambia el valor al searchInput porque ahora es el elemento del dom y como sabemos el input tiene un value que cambia :V y por eso no da errores XD

fuente:

https://medium.com/trabe/react-useref-hook-b6c9d39e2022

Para el manejo de formularios les recomiendo usar Formik https://www.npmjs.com/package/formik

Para el manejo de formularios les recomiendo bastante React Hook Form https://react-hook-form.com/
Simplifica mucho el proceso de obtención de datos y validación de los campos.

Gran explicación, estoy trabajando en una aplicación web, y gestionaba mediante el evento del manejador, pero estaba intentando utilizar componentes agnosticos, y no daba con la manera de obtener los valores, ahora ya entiendo porque. Muchas gracias.

El ejemplo se me quedó un poco corto, no le veo mucha ventaja y siento que el componente no queda tan agnóstico, para forms uso event.target.name y el event.target.value para crear un objeto (clave, valor) y este sea el estado de todo el componente. Igual se me hace interesante usar ref

En este video explican un poco más de cómo funciona, por si les interesa.
.

useRef funciona como el document.getElementById o el querySelector. Lo que hacemos es asignarle una referencia a un elemento del DOM, normalmente a los inputs, ya que queremos obtener valores de estos inputs, aunque se les puede agregar referencias a cualquier elemento. Funciona de la siguiente manera:

// primero creamos la referencia
const inputRef = useRef(null)

// asignamos la referencia al elemento
<input 
  ref={inputRef} 
  onChange={handleChange}
/>

// usamos esa referencia cuando queramos
const handleChange = () => {
  console.log(inputRef.current.value)
}

El current viene en todas las referencias que creamos, funciona de manera similar al target…

Creo que me salté esta clase y usaba React-Hook-Forms de una. Shame

useRef en alguna ocaciones tambien se puede manejar ocmo useState con la diferencia que la actualización de esta ref (que puede ser un valor cualquiera) no renderiza como el componente de nuevo, Adjunto un video por si quieren revisar mucho mas este hook y de paso en ingles:
https://www.youtube.com/watch?v=t2ypzz6gJm0

Si usan Material UI
solo deben cambiar ref por inputRef

<TextField
id="outlined-basic" 
label="Search" 
variant="outlined" 
value={search}
onChange={handleSearch}
inputRef={searchInput}
/>

useRef - doc react

Formularios No controlados - doc react

• El useRef accede directamente al nodo del DOM para mutar su valor.

[Formularios controlados - doc react]
(https://reactjs.org/docs/forms.html#controlled-components)
"Un elemento de formulario de entrada cuyo valor es controlado por React se denomina “componente controlado”.

• No usariamos el useRef, sino que el estado del formulario lo controlariamos con un useState, así al mutar el input lo cambiarimos con un onChange={(e) => setState(e.target.value)},

En Platzi hace poco actualizaron el curso práctico de React y hay clase donde se explica mejor el useRef con un formulario con varios inputs (el curso también lo da Oscar y es muy bueno): https://platzi.com/clases/2484-react-practico/42084-useref-y-formularios/

Pienso que en esta clase de cursos, antes de escribir código se debería ir al tablero y explicar un poco los conceptos y cómo es la dinámica entre componentes. Es mejor tener claros los conceptos que las implementaciones.

este curso es mas saraza que otra cosa, onda esta perfecto que te mencionen cada hook, pero para eso me das un texto, mencionando cada hook y te ahorraste 10 videos, porque use ref tiene mucho mas impacto sobre otras cosas, pero bueno

En los ultimos formularios en los que he trabajado me he dado cuenta que usando useRef te ahorras el estado, y el onChange de cada input por lo que si tienes muchos inputs en un mismo formulario es mejor para el rendimiento usar refs en vez de escuchar cada input con onChange y estados

Entonces useRef te permite hacer una customizacion asi en vez de poner event.target.value que es muy general, puedes poner el referente tuyo?

No sirve solo para el caso de los inputs o formularios, su uso puede ser aplicado a statefull components de igual manera en los que podemos ejecutar métodos internos de dichos components, al igual que podemos ejecutar algunos metodos del input en el caso que el da de ejemplo, es una manera más clara y fácil de acceder a los valores de los inputs.

De verdad que estas clases tan absurdas y sin profundidad ninguna me están haciendo cuestionarme mi suscripción a platzi. Empiezo a estar bastante harto.

¿Qué es useRef?
explicado por: midu.dev
https://youtu.be/GOEiMwDJ3lc?t=1851

useRef es un hook de React que te permite crear referencias mutables que persisten a lo largo de los renderizados del componente. Puedes usarlo para almacenar valores mutables y acceder a ellos desde cualquier lugar del componente sin preocuparte por el ciclo de vida de React. Es útil para manipular elementos del DOM directamente y para optimizar el rendimiento al evitar la necesidad de recrear objetos o valores en cada renderizado. En resumen, useRef es una herramienta poderosa para almacenar y acceder a valores mutables de manera eficiente.

Dejo un video de youu tube donde la explicación es bastante mejor:
https://www.youtube.com/watch?v=4RGObDegoXw

En estos casos la mejor forma de trabajar con inputs no es como lo dice el profe, que asegura que es mejor con refs, por ejemplo si tuviéramos 10 inputs tendríamos que crear 10 ref, esto es algo que la propia documentación de react dice que debe evitarse a toda costa, la mejor forma es usar el event.target como estaba antes del useRef y no genera ningún tipo de bug, no hay necesidad de enseñar malas practicas para justificar una implementación sin sentido

para esos locos que lo están haciendo con ts

const handleSearch = () => {
        searchInput.current && setSearch(searchInput.current.value)
    }

Este Video ayuda a comprender un poco mejor el useRef. Dura 5 minutos. Directo al punto, bien explicado.

Me parecio una manera muy sencilla de usar useRef, creo que si tengo asignaciones de hacer busquedas utilizare useRef para hacerlo

Miren el minuto 7; me ayudó https://www.youtube.com/watch?v=4RGObDegoXw

Otro uso que se le puede dar a UseRef es el de mantener la referencia a un objeto mutable a lo largo de las distintas renderizaciones del componente. Tengan en cuenta que al usar hooks como useState y useReducer, con cada modificacion del estado generados por estos, el componente se vuelve a renderizar con un nuevo estado inmutable, es decir, cada variable, funcion, etc, definida dentro del cuerpo de la funcion del componente es DISTINTA a la de la renderizacion anterior, por que pertenece a otra “instancia” del componente.

En esta guia hecha por Dan hay un buen ejemplo de esto:
https://overreacted.io/a-complete-guide-to-useeffect/#swimming-against-the-tide

Por cierto, lean el post entero que Dan lo explica mucho mejor que yo.

La mejor forma de trabajar con los formularios e inputs en React es con “useRef”.

Encontré una nota que me parece super util conocerla, este texto es tomado de la documentación de React;

Ten en cuenta que useRef no notifica cuando su contenido cambia. Mutar la propiedad .current no causa otro renderizado. Si quieres correr algún código cuando React agregue o quite una referencia de un nodo del DOM, puede que quieras utilizar en su lugar una referencia mediante callback.

useRef

No entendí las ventajas frente a utilizar useState para manejar el estado en los Inputs, ¿alguien me podría explicar? Gracias!

tenia entendido que reactjs recomienda la primera forma en vez de sobreexplotar los refs.

Pueden encontrar aquí mas información sobre useRef

Hola, estoy siguiendo este proyecto en Nextjs. Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store

a