Приложение работает в Мозиле и виснет в Хроме

Question

https://frontend-project-12-production-726b.up.railway.app/

Ссылка на приложение, залитое на Railway. Логин/Пароль admin.

Суть проблемы: если нажать на плюсик рядом со словом Каналы, должно появиться модальное окно Добавить канал. И при использовании Огнелиса всё так и работает. А вот если сделать тоже самое из под Хрома, то приложение виснет. Что, хотя бы теоретически, может быть причиной такого? В какую сторону копать?

Код на кнопке, которая вызывает модальное окно:

  <Button
    className="p-0 text-primary btn-group-vertical"
    variant=""
    onClick={() => dispatch(actions.setModalType('adding'))}>

Код, который выбирает, какое модальное окно отрисовать:

const modals = {
  adding: AddModal,
  renaming: RenameModal,
  removing: RemoveModal,
};

const getModal = (modalName) => modals[modalName];

const ModalComponent = () => {
      const modalType = useSelector(({ modals }) => modals.modalType);
      if (!modalType) {
        return null;
      }
      const Component = getModal(modalType);
      return <Component />;
    };

Нужно модальное окно:

const AddModal = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const channelsNames = useSelector(({ channels }) => channels.channelsList)
    .map(({ name }) => name);
  const [isSubmitting, setSubmitting] = useState(false);
  const formik = useFormik({
    initialValues: {
      name: '',
    },
    validationSchema: yup.object({
      name: yup.string().notOneOf(channelsNames, t('errors.unique')).required(t('errors.required')),
    }),
    onSubmit: ({ name }) => {
      setSubmitting(true);
      socket.emit('newChannel', { name }, (response) => {
        const { status, data } = response;
        console.log(status);
        dispatch(channelsActions.setCurChannelId(data.id));
        setSubmitting(false);
      });
      toast.success(t('toastify.add'));
      dispatch(modalActions.setModalType(null));
    },
  });
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  });

  return (
    <Modal centered show onHide={() => dispatch(modalActions.setModalType(null))}>
      <Modal.Header closeButton>
        <Modal.Title>
          {t('modal.add')}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={formik.handleSubmit}>
          <Form.Group controlId="name">
            <Form.Control
              required
              name="name"
              ref={inputRef}
              value={formik.values.name}
              className="mb-2"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              isInvalid={formik.touched.name && formik.errors.name}
            />
            <Form.Label className="visually-hidden">{t('modal.channelName')}</Form.Label>
            <Form.Control.Feedback type="invalid">
              {formik.errors.name}
            </Form.Control.Feedback>
            <div className="d-flex justify-content-end">
              <Button variant="secondary" className="me-2" onClick={() => dispatch(modalActions.setModalType(null))}>{t('modal.btnCancel')}</Button>
              <Button type="submit" disabled={isSubmitting}>{t('modal.btnSubmit')}</Button>
            </div>
          </Form.Group>
        </Form>
      </Modal.Body>
    </Modal>
  );
};

Answer 1

Благодаря совету комрада SwaD понял, в каком направлении копать. Проблема была довольно идиотская, а именно в том, как я реализовал автофокус на поле ввода текста:

  useEffect(() => {
    inputRef.current.focus();
  });

Надо было проставить пустой массив вот так и бесконечная перерисовка прекратилась:

  useEffect(() => {
    inputRef.current.focus();
  }, []);

Так как я всегда проверял работу кода только в Огнелисе, а он видимо сам исправляет эту ошибку, никогда не придавал значения этому моменту.

БЛОГ НА HUSL

Приложение работает в Мозиле и виснет в Хроме

Ответы (1 шт):