Как можно избежать повторного рендеринга компонента из-за смены реквизита, чтобы исправить проблемы с производительностью

Question

У меня есть компонент, где на отправить форму. Я убираю лишние значения.

submitForm.then(() => {
            setUserAssignModal(false);
            updateUserTrack({
              counterOrdersCount: trackUserVisit.counterOrdersCount + 1
            });
            handleOrderSubmit(userOrdersData);
            if (appliedDiscount) {
              this.handleRemoveDiscount();
            }

            setMoreOrderInfo({
              isPackingIncluded: false,
              userName: "",
              userPhone: "",
              selectedPaymentType: {
                id: null,
                mode: null
              }
            });
            navigation.navigate("Order");

поэтому, прежде чем переходить, меняются реквизиты моего компонента, его повторный рендеринг почти 10 раз. Как выполнить очистку после перехода от текущего экрана к экрану заказов, чтобы избежать ненужных повторных визуализаций?

Answer 1

Похоже, у вас так много частей состояния, которые обновляются в одном блоке кода, что вызывает ненужные повторные рендеринг. Вы должны сохранить свое состояние в одном объекте, чтобы вы могли очистить все сразу, передав ему исходное / начальное состояние. Если вы уже используете Redux, ваш редуктор может отлично справиться с этой задачей. Если ваши элементы состояния являются локальными, вы можете попробовать собрать их все в одном объекте, чтобы у вас было меньше повторных рендеров.