Bueno, se que esto es algo que cada uno debería estudiar por su cuenta, pero lo explicaré como lo entendí, mi aporte.
FormData es una Web API que crea una estructura con los valores del formulario (No está disponible solo en React, sino en cualquier archivo js). La ref que se crea del form no es una ref como la que normalmente se aplica a un input; normalmente cuando agregamos una ref a un input, podemos acceder al value haciendo inputRef.current.value; en este caso, la ref del form tiene todos los inputs adentro, pero no se puede acceder a sus valores con un form.current.value; FormData entonces crea una estructura de pares llave-valor que contiene esos valores, pero require que le pasemos una ref del formulario al constructor, por eso usamos la ref del form. También habría podido hacerse de esta forma usando javascript normal:
const form = document.getElementById("form");
const formData = new FormData(form);
Pero como es React, el useRef nos sirve más para el constructor del formData (no podemos usar getElementById porque, al ser React, en el momento en que el navegador lea estas líneas de código, aún no habrá agregado el form al DOM, por eso debemos usar useRef). Ese FormData entonces es una estructura clave-valor tipo Map, la cual trae la función get(<key>) para obtener el “valor” de cualquiera de sus “llaves”. Por eso las líneas 22, 23 y 24 usan formData.get(<key>).
Espero que se entienda y sirva de algo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?