Сохранение данных форм с помощью Nuqs

Во время заполнения формы может потребоваться промежуточное сохранение данных, чтобы при обновлении страницы пользователь не потерял введенные данные, либо поделиться данными формой с другими пользователями.

Вариант с localStorage не самый подходящий, с его помощью нельзя поделиться ссылкой на форму с другими пользователями. Автор статьи предлагает использовать библиотеку Nuqs, с помощью которой можно сохранять данные формы в URL в query params. Его можно легко интегрировать с Zod и useForm от react-hook-form и у него встроенная поддержка типизации. Пример формы:

import { useQueryState, parseAsJson } from "nuqs"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"

// Define our schema
const statusEnum = ["working", "chilling", "cooking"] as const
const formSchema = z.object({
  firstName: z.string(),
  lastName: z.string(),
  status: z.enum(statusEnum),
})
type FormSchemaType = z.infer<typeof formSchema>

function MyForm() {
  // Initialize Nuqs state
  const [jsonData, setJsonData] = useQueryState(
    "json",
    parseAsJson(formSchema.parse),
  )

  // Set up form with React Hook Form
  const form = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    values: jsonData, // Pre-fill form with URL data
  })

  const handleSubmit = form.handleSubmit((data) => {
    console.log(data)
    setJsonData(data) // Update URL state
  })

  return (
    <form onSubmit={handleSubmit}>
      <TextInput label="First name" {...form.register("firstName")} />
      <TextInput label="Last name" {...form.register("lastName")} />
      <SelectInput
        label="Status"
        options={statusEnum}
        {...form.register("status")}
      />
      <Button type="submit">Submit</Button>
    </form>
  )
}

https://armand-salle.fr/post/persisting-form-data-in-react-a-modern-approach-with-nuqs/