How to Properly Sync Zustand and React Hook Form Data After Page Refresh?

[frontendjulien]

Hello guys, I'm new to working with React Hook Form and Zod. I'm building a form with Shadcn, React Hook Form, and Zod, and I'm implementing Zustand to persist data across page refreshes.

The issue I'm running into is that after a page refresh or when a user navigates back to the form, the input data persists visually as expected, but React Hook Form throws validation errors on submit, as if the inputs were empty. From what I understand, It seems like React Hook Form doesn’t really sync with Zustand's persisted data, which causes validation to fail.

Zustand Form Store

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { devtools, persist } from "zustand/middleware";

export type Form = {
  name: string;
  email: string;
  address: string;
};

export type State = {
  form: Partial<Form>;
};

export type Actions = {
  updateForm: (form: Partial<Form>) => void;
};

const initialState: Form = {
  name: "",
  email: "",
  address: "",
};

export const useFormStore = create<State & Actions>()(
  devtools(
    persist(
      immer((set) => ({
        form: initialState,
        updateForm: (form) =>
          set((state) => ({ form: { ...state.form, ...form } })),
      })),
      {
        name: "form-storage",
      },
    ),
  ),
);

"use client";

import { z } from "zod";
import { useEffect } from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, FormProvider } from "react-hook-form";
import { useFormStore } from "@/stores/form-store";

// COMPONENTS
import InputFields from "./input-fields";
import { Button } from "@/components/ui/button";

const required_error = "This field is required";

const FormSchema = z.object({
  name: z.string().min(1, {
    message: required_error,
  }),
  address: z.string().min(1, {
    message: required_error,
  }),
  email: z.string({ message: required_error }).email({
    message: "Please provide a valid email address.",
  }),
});

export default function Page() {
  const { name, email, address } = useFormStore((state) => state.form);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      name,
      address,
      email,
    },
  });

  const {
    reset,
    formState: { isSubmitting },
  } = form;

  useEffect(() => {
    reset({ name, address, email });
  }, [name, address, email, reset]);

  const onSubmit = (data: z.infer<typeof FormSchema>) => {
    console.log(data);
  };

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <InputFields />
        <Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </FormProvider>
  );
}

Input Field Component

import { useFormContext } from "react-hook-form";
import { useShallow } from "zustand/react/shallow";
import { useFormStore } from "@/stores/form-store";
import { Input } from "@/components/ui/input";
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from "@/components/ui/form";

export type Field = {
  name: string;
  label: string;
  placeholder: string;
  value?: string;
};

export default function InputFields() {
  const { control } = useFormContext();

  const { form, updateForm } = useFormStore(
    useShallow((state) => ({
      form: state.form,
      updateForm: state.updateForm,
    })),
  );


  const formFields: Field[] = [
    {
      name: "name",
      label: "Name",
      placeholder: "Enter name",
      value: form.name,
    },
    {
      name: "address",
      label: "Address",
      placeholder: "Enter address",
      value: form.address,
    },
    {
      name: "email",
      label: "Email",
      placeholder: "Enter email",
      value: form.email,
    },
  ];

  return (
    <>
      {formFields.map((field) => (
        <FormField
          key={field.name}
          control={control}
          name={field.name}
          render={({ field: fieldProps }) => {
            return (
              <FormItem>
                <FormLabel>{field.label}</FormLabel>
                <FormControl>
                  <Input
                    placeholder={field.placeholder}
                    {...fieldProps}
                    value={field.value}
                    onChange={(e) => {
                      fieldProps.onChange(e);
                      updateForm({
                        [field.name]: e.target.value,
                      });
                    }}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            );
          }}
        />
      ))}
    </>
  );
}

I've found a workaround that involves using React Hook Form’s reset function in a useEffect to update the states to match Zustand's values when the component mounts. While this works, it may not be the best solution/optimal way because I have many forms with 10+ fields. So adding useEffect in every form would look very messy and not ideal.

  useEffect(() => {
    reset({ name, address, email });
  }, [name, address, email, reset]);

If anyone else encountered this issue or know a cleaner/better solution, please please share your knowledge. I'd really appreciate any guidance. Thanks in advance!

[BrendanC23]

Can you provide a CodeSandbox link with a reproduction?

Can you log this line during the initial render and see what values are being stored?

const { name, email, address } = useFormStore((state) => state.form);

Also, what does console.log(form.getValues()) print during the initial render?

[metel777]

looking for solution too. i have an identical problem with shadcn form, useForm with zod, separate component with input, and zustand. the only solution i found is to redirect user to page where he can return back with regular anchor, therefore to reset page ☹️