Как исправить предупреждение: Can't perform a React state update on an unmounted component?

Question

[lexstile]

При сабмите формы вылезает предупреждение:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Есть компонент Login

export const LoginPage = () => {
  const dispatch = useDispatch();
  const history = useHistory();

  const onSubmit = async (fields, actions) => {
    await dispatch(loginUser(fields));
    actions.setSubmitting(false);
  };

  return (
    <View id="login" activePanel="main">
      <Panel id="main">
        <PanelHeader>Авторизация</PanelHeader>
        <Group>
          <Formik
            validationSchema={LoginSchema}
            initialValues={{ [FIELDS.EMAIL]: '', [FIELDS.PASSWORD]: '' }}
            onSubmit={onSubmit}
          >
            {({ dirty, isValid, isSubmitting }) => (
              <Form>
                <Field name={FIELDS.EMAIL}>
                  {({ field, meta }) => (
                    <FormItem top="Email" status={getFieldStatus(meta)} bottom={meta.touched && meta.error}>
                      <Input type="text" placeholder="Укажите Ваш email" {...field} />
                    </FormItem>
                  )}
                </Field>
                <Field name={FIELDS.PASSWORD}>
                  {({ field, meta }) => (
                    <FormItem top="Пароль" status={getFieldStatus(meta)} bottom={meta.touched && meta.error}>
                      <Input type="password" placeholder="Введите пароль" {...field} />
                    </FormItem>
                  )}
                </Field>
                <FormItem>
                  <Button
                    stretched
                    type="submit"
                    size="l"
                    before={isSubmitting && <Spinner size="small" style={{ color: 'var(--white)' }} />}
                    disabled={!dirty || !isValid || isSubmitting}
                  >
                    Войти
                  </Button>
                </FormItem>
                <FormItem style={{ textAlign: 'center' }}>
                  <Link onClick={() => history.push(GUEST_ROUTES.RESTORE)}>Забыли пароль?</Link>
                </FormItem>
                <FormItem style={{ textAlign: 'center' }}>
                  <Link onClick={() => history.push(GUEST_ROUTES.REGISTER)}>Создать новый аккаунт</Link>
                </FormItem>
              </Form>
            )}
          </Formik>
        </Group>
      </Panel>
    </View>
  );
};

loginUser

export const loginUser = (data) => async (dispatch) => {
  const [execute] = apiShell(callLogin, dispatch);
  const response = await execute(data);

  const accessToken = get(response, 'access_token');

  if (accessToken) {
    saveToken(accessToken);
    dispatch(userSlice.actions.setRole(getRole(accessToken)));
  }
};

userSlice

const initialState = {
  role: getRole(),
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setRole: (state, action) => {
      state.role = action.payload;
    },
  },
});

Comments

[Mikhail Osher]

Ошибка не в этом коде. Тут ни одного эффекта нет.

[lexstile]

Mikhail Osher, если вы про useEffect, то его у меня в приложении на данный момент в принципе нет.
Ошибка в вызове:

dispatch(userSlice.actions.setRole(getRole(accessToken)));

Но пока не понимаю, как это аффектит.

[black1277]

у вас происходит какой-то эффект в компоненте, который уже был размонтирован.

[Mikhail Osher]

lexstile, Вы не понимаете. Ошибка конкретно указывает на то, что какой-то компонент имеет useEffect, который вызывает setState. Ищите там ошибку, а не в компонентах, которые привели в пример.

[lexstile]

Mikhail Osher, я же сказал, что нет у меня в приложении вызова хука - useEffect

[lexstile]

Или я вас неправильно понял? Mikhail Osher,

[lexstile]

Mikhail Osher, вот последовательность вызовов:

[lexstile]

Mikhail Osher, если только useEffect в сторонней библиотеке.

[Mikhail Osher]

lexstile, я еще не проснулся, прошу прощения. Вполне возможно, что ошибка не на Вашей стороне. Ошибка могла быть в таком случае

- component1 рендерит component2
- component2 делает что-то асинхронное, и вызывает setState
- component1 убирает component2 из дерева (либо же оба компонента исчезают из дерева, например, при редиректе), пока выполняется асинхронный вызов внутри component2
- component2 попытается вызвать setState после unmount

[lexstile]

Mikhail Osher, да ничего страшного))
интересное предположение, спасибо большое за объяснение, попробую подкопаться.

[lexstile]

Mikhail Osher, вы правы, проблема в:

const onSubmit = async (fields, actions) => {
    await dispatch(loginUser(fields));
    actions.setSubmitting(false);
  };

Я делаю setSubmitting после запроса, а внутри loginUser меняется роль пользователя, которая запускает редирект.
Следовательно и вылезает предупреждение.

[lexstile]

Mikhail Osher, в общем, если сделать так:

await dispatch(loginUser(fields)).catch(() => actions.setSubmitting(false));

Проблемы нет, но не знаю, на сколько это некрасиво.

[Mikhail Osher]

lexstile, да неважно, красиво или некрасиво. Главное, чтобы код работал, и чтобы Вы или другие люди через год поняли почему именно так код был написано.