Heyo,

I have a page / component that looks like this (simplified)

"use client";

import Notification from "@/components/notification";
import { useFormState } from "react-dom";
import { useState, useRef, useEffect } from "react";
import { contactFormSubmit } from "@/app/actions";

const initialState = {
  success: false,
  message: "",
};

export default function Contact() {
  const formRef = useRef<HTMLFormElement>(null);

  const [show, setShow] = useState(false)

  const [state, formAction] = useFormState(contactFormSubmit, initialState);

  if (state?.success) {
    formRef.current?.reset();
  }

  useEffect(() => {
    if (state.success) {
      setShow(true);
    }
  }, [state.success]);

  return (
    <>
      <form
        action={formAction}
        ref={formRef}
        className="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48"
      >
      </form>
      <Notification show={show} setShow={setShow} state={state} />
    </>
  )
}

Whenever the form submits successfully, it resets the form. What I'm confused on is I thought that

  if (state?.success) {
    formRef.current?.reset();
  }

would only run when the pages loads right? Or does it rerun once a form is submitted?