I
I
Ilya2019-05-24 11:14:54
React Native
Ilya, 2019-05-24 11:14:54

How to prevent re-rendering?

Hello, I am facing the following problem:

VirtualizedList: You have a large list that is slow to update

Memory is clogged. How do I prevent a page from being re-rendered for no reason.
The fact is that now render can occur 5-6 times in a row.
Below are the main pieces of code.
Everything in PureComponent

The main module because of which this happens:
spoiler
<Carousel
                scrollInterpolator={ scrollInterpolators[`scrollInterpolator${4}`]} <- Анимация
                slideInterpolatedStyle={animatedStyles[`animatedStyles${4}`]}  <- Анимация
                windowSize={1}
                firstItem={this.state.activeSlide} <- Текущий номер элемента
                sliderWidth={screenWidth} <- Ширина слайдера
                itemWidth={screenWidth} <- Ширина объекта внутри
                data={this.state.dataObject}  <- Массив
                renderItem={this._renderItem} <- Объект который рендерится в карусели
                onSnapToItem={index => this.setState({ activeSlide: index })} <- Пагинация
              />
_renderItem which finds in the carousel :
spoiler
return (
        <View
          style={{
            paddingBottom: 14,
            paddingTop: 8,
            flex: 1,
            paddingHorizontal: 8,
            width: w
          }}
        >
          <ItemCard
            data={item}
            StatusObj={
              item.status === "C" ? (
                <Ionicons name="ios-lock" size={28} color="#4B1E70" />
              ) : item.status === "O" ? (
                <Ionicons name="ios-unlock" size={28} color="red" />
              ) : item.status === "N" ? (
                <Ionicons
                  name="ios-help-circle-outline"
                  size={28}
                  color="#4B1E70"
                />
              ) : null
            }
            onLock={() =>
              _showModal(
                this.setState({
                  idSideObj: item.idSite,
                  visibleModal: false
                })
              )
            }
            CurrentName={_CurrentSet(
              (itemCard = _dataObject[_ActiveSlide].name),
              (aliasName = _dataObject[_ActiveSlide].aliasName)
            )}
            WidthProps={w}
            GoCamera={() => this.props.navigation.navigate(CAMERAVIEW)}
            nameItem={item.aliasName === "" ? item.name : item.aliasName}
            TimeStatus={item.timeOfStatus}
            imageRender={_CheckIconSetting(
              (CurrentSiteID = _dataObject[_ActiveSlide].address),
              (itemCard = _dataObject[_ActiveSlide].name),
              (aliasName = _dataObject[_ActiveSlide].aliasName)
            )}
            onClick={() =>
              this.props.navigation.navigate(EDITPAGE, {
                ObjectName: item.aliasName === "" ? item.name : item.aliasName,
                ImageName: item.user,
                CurrentAddress: item.address,
                CurrentSiteObj: item.idSite,
                CurrentImageSite: this.state[item.address],
                ObjectImage:
                  item.type === 2
                    ? MiniimageHomeObject
                    : item.type === 3
                    ? MiniimageWorkObject
                    : item.type === 4
                    ? MiniimageCarObject
                    : item.type === 1
                    ? MiniimageFlatObject
                    : item.type === 5
                    ? MiniimageTruckObject
                    : null,

                onGoBack: this.onGoBack
              })
            }
            ImageItem={this.state[item.address]}
            ImageItemReq={
              item.type === 2
                ? imageHomeObject
                : item.type === 3
                ? imageWorkObject
                : item.type === 4
                ? imageCarObject
                : item.type === 1
                ? imageFlatObject
                : item.type === 5
                ? imageTruckObject
                : null
            }
            CurrentItem={item.type}
          />
        </View>

The functions that happen inside _renderItem have already been fixed. Works specifically only when necessary.
But in general, with render, such are the problems.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question