1 second delay in setState , when flatlist is used

[vishnuc]

So I have component like below

 return (
      <View>
        <View
          style={!this.state.showSearchBar && styles.hidden}
        >
          <Header>
            <View>
              <Item >
                <Icon name="ios-search" />
                <Input placeholder="Search" />
              </Item>
              <Button
                onPress={this.searchBarButton}
              >
                <Text>Search</Text>
              </Button>
            </View>
          </Header>
        </View>

        <View
          style={this.state.showSearchBar && styles.hidden}
        >
          <Header ref={"button"}>
            <Button onPress={() => this.searchBarButton()} transparent>
              <Icon name="search" style={styles.bigblue} />
            </Button>
          </Header>
        </View>

<FlatList style={{zIndex: 0,minHeight:'100%'}}
				ref={ref => {
					this.listRef = ref;
				}}
				extraData={this.state}
				data={this.state.data}
				onRefresh={this.onRefresh}
				refreshing={this.state.refreshing}
				renderItem={this._renderItem}
				onEndReached={this.onEnd}
				onEndReachedThreshold={0.5}
				ListHeaderComponent={this.headerMessage}
				ListFooterComponent={this.footerMessage}
				ListEmptyComponent={this.empty}
			/>


      </View>
    );
  }

When I click on button I basically set state so I am hiding and showing search bar with search icon

 searchBarButton() {
    this.setState({ showSearchBar: !this.state.showSearchBar });
  }

and style

   hidden: {
    height: 0,
    width: 0,
    opacity: 0
  }

So basically this works very smooth and fast when my scene is just with header , But when I add flatlist , there is 1 second delay between toggle.But if I remove flat list its again fast.

[iamawebgeek]

Are you using the state inside flat list? If no, remove it from extraData and check if it has got better

[vishnuc]

Yes I use state inside ListHeaderComponent.

…

On 14 August 2017 at 17:08, iamawebgeek ***@***.***> wrote: Are you using the state inside flat list? If no, try to remove it from extraData — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#15480 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACHTism5L-L5ofcKuyQ-cKBe85TvgAjIks5sYDGlgaJpZM4O1xG1> .

[iamawebgeek]

Is your renderItem component pure? Also in __DEV__ mode there may be some slow performance, try to uncheck it in development settings and reload the bundle

[vishnuc]

Yes renderItem is pure , I also removed all the state in ListHeaderComponent .Now Flatlist is pure but contains around 100 items.But problem is my flatlist is being called and rendered again when state is changed,same problem when extraData is removed. I guess I should use shouldcomponentupdate and stop reRendering. I am using Expo , there is no development mode in that I guess..

…

On 14 August 2017 at 17:36, iamawebgeek ***@***.***> wrote: Is your renderItem component pure? Also in __DEV__ mode there may be some slow performance, try to uncheck it in development settings and reload the bundle — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#15480 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACHTiuJkAbyIs7x_s-y6NrUhB7FQ9hemks5sYDhZgaJpZM4O1xG1> .

[oakis]

I had this problem in DEV but not in production. Thanks @iamawebgeek

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.