On `MailerSubscriber` also has this same pattern.

Why is that? What is the use in this context?

<Formik
    initialValues={{
        email: '',
        submit: null
    }}
    validationSchema={Yup.object().shape({
        email: Yup.string().email('Must be a valid email').max(255).required('Email is required')
    })}
    onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
        try {
            const options = {
                headers: {
                    'content-type': 'application/json'
                }
            };
            await axios.post('https://yourapicall', { email: values.email }, options);
            dispatch(
                openSnackbar({
                    open: true,
                    message: 'Success! Please check inbox and confirm.',
                    variant: 'alert',
                    alert: {
                        color: 'success'
                    },
                    close: false
                })
            );
            if (scriptedRef.current) {
                setStatus({ success: true });
                setSubmitting(false);
            }
        } catch (err: any) {
            if (scriptedRef.current) {
                setStatus({ success: false });
                setErrors({ submit: err?.message });
                setSubmitting(false);
            }
        }
    }}
>

Hi,

Thanks for reaching out.

useScriptRef is a reference created for an entire app using the useRef() hook. 

Path: full-version/src/hooks/useScriptRef.js

The useRef() Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

Why do they exist in AuthLogin? => When the condition returns true, it means it has a still initial state and the page has not been navigated, in such a case, we may want to show/update some data on UI.

Hope that makes sense!

Feel free to reach out if any further questions.

Kind Regards,

Rakesh

In AuthLogin, AuthRegistration, the forms use a useScriptRef hook. They haven't been capturing the error state well and I was wondering if someone could explain the use of those hooks to me and how they work.

const AuthLogin = () => {
  const [checked, setChecked] = React.useState(false);
  ...
  const scriptedRef = useScriptRef();
  ...
  return (
  <>
      <Formik
      ...
      onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
          try {
          ...
          } catch (err) {
          if (scriptedRef.current) { // WHY??
              setStatus({ success: false });
              setErrors({ submit: err.message });
              setSubmitting(false);
          }