Lack of reactivity of defaultValues

[kwiat1990]

Hey, I wonder if defaultValues should be reactive or not? I try to populate name and email with values coming from a session and I make it inside a useEffect. For some reason I can see not effect at all - defaultValues won't get populated.

I had also a problem while using useState to hold user's data. With useRef it works but the behaviour of the form didn't change.

My code look currently like this:

 const { user } = useSession();
  const [name, setName] = React.useState("name placeholder");
  const [email, setEmail] = React.useState("email placeholder");
  const ref = React.useRef({name: "name placeholder", email: "email placeholder"})

  React.useEffect(() => {
    console.log("state before", name, email); // log placeholder values
    console.log("ref before", ref.current); // log placeholder values

    ref.current = { name: user?.name ?? "oko", email: user?.email ?? "ucho" }
    setName(user?.name ?? "oko");
    setEmail(user?.email ?? "nos");

    console.log("state after", name, email); // log placeholder values (!)
    console.log("ref after", ref.current); // log user's data
    
  }, [user]);

  return (
    <ValidatedForm
      className={clsx(className)}
      defaultValues={{...ref.current}} // as well as { name, email }
      id={formId}
      name="add-comment"
      method="POST"
      noValidate
      resetAfterSubmit
      validator={addCommentValidator}
      onSubmit={onSubmit}
    >
      <span>{ref.current.name}</span> // display user's data
      <span>{name}</span> // display user's data

       // both inputs display placeholder values
      <Input
          id={`name-${formId}`}
          name="name"
          type="text"
        />
        <Input
          id={`email-${formId}`}
          name="email"
          type="email"
        />
      ...
</ValidatedForm>

As you can see useState behaves a bit odd for me as the state changes aren't visible while calling console.log from inside the useEffect. They are reflected in the template, though, so I suspect it's my lacking understanding of React mechanisms. Perhaps I would get displayed that change in console log on the next tick or something.

But what I don't quite understand is the reason why defaultValues don't update. I have tried to set key on the wrapping component in order to make it re-render when user logs in or logs out but it didn't help.

I would be glad if someone could give me some hint and point out what am I doing wrong.