useRef y formularios

Características y diferencias entre useRef y useState
useRef es un hook utilizado para obtener una referencia a los datos de un objeto con información mutable. Es decir, es como una manera de siempre poder obtener los datos mas recientes mediante referencia de algún objeto de html. En este caso referenciamos a los valores recientes de un formulario. Dos características importantes de useRef es que los datos son persistentes en caso de que se re-renderice el componente. Así como también, actualizar los datos de esta referencia no causan el re-render. Cabe recalcar la diferencia con useState, que la actualización de datos es síncrona, ya además como hemos mencionado, no se re-renderiza

Comparto este video para complementar el uso de useRef 😄

https://www.youtube.com/watch?v=raJjjm3rhhU

useRef:

1. Genera una referencia al elemento y podremos acceder a los valores por medio de ‘current’, y por este medio obtener lo que estamos typeando según sea el caso y poderlo transmitir a donde lo necesitemos.

2. El elemento que tendrá la referencia debe tener atributo: ref={NOMBRE_USEREF}

3. Podemos acceder a toda la data de la siguiente manera: new FormData(NOMBRE_USEREF.current);

4. El elemento también debe tener un atributo: name=“NOMBRE” y podremos acceder a la data que trae en current de la siguiente manera: formData.get(‘NOMBRE’);

joyita de clase 😮✨
Siempre habia trabajado la data de mis inputs con useState.

.
Que bonito cuando se aprende algo nuevo.

preventDefault():
https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault

Es mejor cambiar el atributo del boton a type=“button” en vez de hacer el preventDefault().

Los botones por default en un formulario son de tipo submit.

Acá un poco más de como funciona FormData por si quieren ver y hacer más cosas

Se usan para obtener la información de los formularios y mandarla regularmente al backend

• Por ahora solo se hará el proceso de obtener la información.
• Primero nos traemos el hook

import React,{useRef} from 'react';

• Lo inicializamos

const form = useRef(null);

• Lo anclamos al formulario donde se va a usar con ref

<form action="/" className="form" ref={form}>

• Agregamos un evento al boton

<input 
					type="button" 
					value="Log in" 
					className="primary-button login-button"
					onClick={handleSubmit}
					/>

• Luego creamos la función que leerá los datos

const handleSubmit =()=>{
		const formdata = new FormData(form.current);
		const data = {
			username:formdata.get("email"),
			password:formdata.get("password")
		}

		console.log(data)//por ahora no se manda al backend
	}

UseRef: va a generar una referencia al elemento y poder acceder a los valores por medio de current y de esta forma tener lo que estamos tipeando según sea el caso y poderlo transmitir a donde sea el paso.

formData: es parte de javaScript y lo que nos va a permitir es instanciar todos los elementos que se encentren dentro de un formulario y los va a capturar conforme sean llenados y de esta forma cuando le demos on submit los va a tener presentes y podemos hacer con ellos lo que sea necesario también podemos enviar todo el objeto en este caso que se genera con formData a lo que vendría siendo el backend de esta forma va de una forma mas segura y encriptada para que esta información no sea accesible por otras personas o que en este caso alguien malicioso quiera inspeccionar como se está transmitiendo esta información
ergo: tiene mucho mas valor formData que algunos otros metodos que puedas encontrar en el uso de useRef o useState.

Eso del FormData es de las mejores cosas que he aprendido hoy

Form Data es la herramienta fundamental para manejar todo tipo de envió de formularios de manera segura, desde cuentas de usuarios, hasta cripto transacciones 😄

Para poder estructurar los datos y mostrarlos por consola, me pareció mas practico usar el método fromEntries. Dejo enlace a la doc y un ejemplo. Saludos 👋
Link

    const data = Object.fromEntries(formData)
    console.log(data)

    // resultado: {user: 'usuario1', password: 'Contraseña1'}

Si les sale un warning como este en consola:

Warning: Invalid DOM property for. Did you mean htmlFor? 

Consideren buscar en sus labels la etiqueta for y cambiarla por htmlFor, es decir, de:

<label for="email" className="label">Email address</label>

a algo como:

<label htmlFor="email" className="label">Email address</label>

Fuente: Miami me lo confirmó (stackoverflow)

viniendo de VUEJS prefiero seguir haciendolo con useState

Video Recomendado. Ejemplos de uso de useRef: https://www.youtube.com/watch?v=D2ElJVzriCk

Importante conocer la API de Form Dara
https://developer.mozilla.org/es/docs/Web/API/FormData

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

It can be used to access a DOM element directly.

Example:
Use useRef to track application renders.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores

Espero que Oscar y Platzi tengan en cuenta las recomendaciones en cuanto a la manera en que él transmite la información, ya que usa muchas muletillas y palabras innecesarias que dificultan entender los conceptos de manera clara.
ejemplo:

Manera clara
Y asi, capturamos la informacion de un formulario y la podemos enviar al backend

Manera de Oscar
Y de esta forma, teniendo en cuenta las particularidades de lo que seria nuestra informacion, la podriamos capturar segun sea el caso y de acuerdo a como lo necesitemos, para asi, y segun lo necesitemos podamos enviarla al backend en caso de que esta sea requerida

Si vemos esto como cualquier lenguaje de programacion, se hace muy complicado interpretar y compilar este codigo, me obliga a usar toda a RAM para poder entender el mensaje que importa 😫

Si no fuera por los otros cursos de react que da juandc, se me haria imposible entenderle a Oscar

Primera vez que le entiendo a la perfección a useRef, normalmente los ‘Pros’ en la industria no lo explican, me pregunto si es por envidia o porque no saben de entrada como usar el hook, ya que por lo que veo es la base para entender librerías de formularios comunes en react como Formik

Bastante interesante FormData, es la primera vez que lo veo, aquí pueden encontrar la documentación de este constructor. También se puede utilizar para setear nuevos valores en los input

No se si en un futuro se enseñé lo siguiente, pero existe una librería muy usada para trabajar con formularios muy sencilla y que tiene el event.preventDefault por defecto, se llama "Formik"
Les dejo en enlace aquí

He estado viendo de que si es mejor preventDefault() o ‘type=button’ para el tema de botones.

Honestamente si que type=button puede ser mejor opcion para un proyecto que recien nace.
El PRO de preventDefault() es que hace nuestro código declarativo y que en metodos de peticiones para aplicaciones más complejas utilizar esto es una buena opcion.
.
Lo aconsejable es dejarlo con preventDefault() con proyectos grandes porque asi cuando se tenga que dar mantenimiento a dicho proyecto, esto para el programador que viene le sera más facil el leer nuestro código.
.
Recuerda que hacemos código para humanos.

para aclara… FormData es una interface de Web Api, no de react.

No se porque, pero en mi caso no me aparecia el HEADER en las rutas que a Oscar si. Por lo que en el return de ciertos pages lo agregue manualmente.

return(
<>

<Header/>
Aqui estaria todo tu demas codigo, si o si tiene que estar dentro de esto, de lo contrario el header no se renderiza
</>
)

Eso es lo unico que hay que agregar

De hecho el trabajo de useRef es almacenar variables, las que se pueden recuperar con el método .value. La diferencia con useState es que se pueden asignar directamente, es decir:
estancia.value = 'nuevo valor’
Y lo más importante es que no generan re-render. Por acá este youtuber lo explica largo y tendido:
https://www.youtube.com/watch?v=t2ypzz6gJm0&t=285s

UseRef, se me parece muchisimo a cuando estoy usando Angular con formularios reactivos.
Me refiero al FormBuilder Y al FormGroup.
excelente explicación profe oscar.

Esto se parece a angular con el FormGroup

Que buena esta clase, grandes conocimientos

Explicacion en resumen de toda la logica para utilizar useRef en un formulario