Сохранение данных форм с помощью 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/