FlatList更新缓慢

Question

我有一个FlatList，可以容纳5000个项目。有一个选项可以打开“选择模式”，这会在每个项目旁边显示一个复选框。每当我按下相应的按钮切换到该模式时，在实际呈现复选框之前都会有明显的延迟。

这是我的状态：

{
  list: data, // data is taken from an external file
  selectedItems: [] // holds ids of the selected items,
  isSelectMode: false
}

我的列表：

<FlatList
  data={list}
  extraData={this.state}
  keyExtractor={this.keyExtractor}
  renderItem={this.renderItem}
  removeClippedSubviews
/>

我的清单项目：

<ListItem
  title={item.title}
  isCheckboxVisible={isSelectMode}
  isChecked={isChecked}
  onPress={() => this.toggleItem(item)}
/>

每个列表项都实现shouldComponentUpdate：

...

shouldComponentUpdate(nextProps) {
  const { isCheckboxVisible, isChecked } = this.props;
  return isChecked !== nextProps.isChecked || isCheckboxVisible !== nextProps.isCheckboxVisible;
}

...

我一直认为FlatList仅渲染当前在视口中可见的项目，但在这里感觉像是重新渲染了5000个项目的整个列表。我有什么可以改善的吗？还是我做错了什么？

完整代码：https://snack.expo.io/@pavermakov/a-perfect-flatlist