When parent props change via redux-observable, child form component re-renders without any change in props

[liamlows]

Hey y'all,

So i have been working on this issue for about 3 days now and I have yet to find a solution. I currently have a parent component that contains a child component which houses the Formik form. Props are provided to the parent for the parent UI itself and the child UI as well. On submission of the form the parent props have 1 value that changes, this value is only used in the parent component and not in the child. Thus the child props undergo no change. However, regardless of that, the child component re-renders despite being memoized and all the form data is cleared.

This is unideal as the desired behavior is that when the form is submitted and there is no error, the form will display the notification to the user of a successful submit and clear the form (using refs and FormikProps, see comment under switch statement for statusCode 200). However when there is an error the form will display the notification to the user of an unsuccessful submit and leave the form untouched (so the user can save off their text they provided and try again later).

I cannot figure out why Formik re-renders when it is not necessary. None of the props are changing to the child, its been memoized and functions are using useEffect, there is no manual call to clear the form and enableReinitialize is set to false. I have tried adding keys to all child components thinking that might help but it didn't. Has anyone else experienced these issues?

Some background info on what is happening:

• Below the only prop that changes on submit of the form is the statusCode prop, the others stay the same.
• The areEqual function in the React.memo() call does not get called on child re-render (when the form is cleared).
• If you enter values, submit, then re-enter the exact same values (casing and all) and try to submit, it wont clear the form.
• The form component is simply a wrapper component for the FormikForm, as is the same fore the textinput, textarea, and fileuploader components.
• The state/props for this component are provided via SDUI and redux-observable. On submit, the form values are sent to the reducer and saved into the parent's state (subject, body, attachment props), then the next action in the chain calls for an axios request to be made, after that based on the response from the API a failure or success reducer is called and the statusCode prop is updated accordingly. This is the prop that determines what error/success message is shown. When this prop updated, that is when the form will refresh and clear all its contents despite the child component receiving no prop update. (statusCode is handled in the parent component)

Any and all help is appreciated!

import React, { useRef, useState } from 'react';
import * as Yup from 'yup';
import { useTranslation } from 'react-i18next';
import { FormikProps } from 'formik';

...

const InnerFeedbackForm1: React.FC<IInnerFeedbackFormProps> = ({
   ...
}) => {
  const { t } = useTranslation();
  const formikRef = useRef<FormikProps<object>>(null);
  const initialValues = {
      ...
  };
  const handleSubmit = (event: IFeedbackFormValues): void => {
    formOnSubmit(event);
  };
  const props = {
    initialValues: initialValues,
    onSubmit: handleSubmit,
    validationSchema: ...
    innerRef: formikRef,
  };
  return (
    <Form {...props}>
        ...
    </Form>
  );
};

function areEqual(prevProps, nextProps) {
  console.log('PREV ', prevProps);
  console.log('NEXT ', nextProps);
  return true;
}

const InnerFeedbackForm = React.memo(InnerFeedbackForm1, areEqual);

const FeedbackForm: React.FC<IFeedbackFormProps> = ({
    ...
}) => {
  const { t } = useTranslation();
  let errorMessage = '';
  let successMessage = '';
  switch (statusCode) {
    case 200:
      successMessage = t('Components.FeedbackForm.successMessage');
      // formikRef.current?.resetForm();
      // doRefreshFileNames(prev => prev + 1);
      break;
    case 400:
      errorMessage = t('Components.FeedbackForm.errorMessage');
      break;
  }

  const handleSubmit2 = useCallback(
    (event: IFeedbackFormValues): void => {
      formOnSubmit(event);
    },
    [formOnSubmit],
  );

  return (
    <div className={styles.root} {...dataAttributes}>
      <h1 className={styles.title}>{title}</h1>
      {successMessage ? <p className={styles.successMessage}>{successMessage}</p> : null}
      {errorMessage ? <p className={styles.errorMessage}>{errorMessage}</p> : null}
      <InnerFeedbackForm
        ...
      />
    </div>
  );
};

[johnrom]

It's really not possible to debug this without a minimal codesandbox reproduction. I'd guess that the formOnSubmit function being passed to your parent form isn't stable.

[liamlows]

Ok I can try to re-create this issue in a sandbox. This is the onSubmit function that is provided via SDUI to the UI component seen above. It is a prop and should not change. The DomainActions.onSubmitFeedback that it is referring to is a rxjs and redux Observable action.

formOnSubmit: (values: IFeedbackFormValues): void => {
  dispatchAction([], [DomainActions.onSubmitFeedback(values)]);
},

[johnrom]

I don't use any of those technologies so will definitely need a repro to help diagnose.