【React Native】「VirtualizedList: You have a large list that is slow to update」エラーの対処方法

React Native アプリで FlatList を使用している時に発生した、「VirtualizedList: You have a large list that is slow to update」というエラーについてです。
まだ完全に解決できたわけではないのですが、今までやったことを備忘録としてまとめ。

下記の記事で紹介した、FlatList の速度改善プラス、renderItem() で呼び出すコンポーネントで PureComponent を使うというのが主な対策方法です。

【React Native】FlatListの速度改善で実施したこと
https://cpoint-lab.co.jp/article/202106/20351/

簡単にリストアップすると、下記の 4点です。

1. removeClippedSubviews を true にする
2. getItemLayout で表示する要素の高さを指定する
3. initialNumToRender で初回表示する要素数を指定する
4. renderItem() で呼び出すコンポーネントで PureComponent を使用する

上の 3つについては、上記で紹介している記事に書いてあるので、ご参考ください。

で、PureComponent については下記の記事を参考にさせていただきました。

reactjs – VirtualizedList: You have a large list that is slow to update – Stack Overflow
https://stackoverflow.com/questions/44743904/virtualizedlist-you-have-a-large-list-that-is-slow-to-update

と言っても特に難しい事ではなく、下記のサンプルコードのように FlatList の renderItem() で呼び出す要素のコンポーネントで PureComponent を extends するだけです。

import React, { PureComponent } from 'react';
import { View } from 'react-native';

class FlatListItem extends PureComponent {
  render() {
    return () {
      <View>
        ......
      </View>
    }
  }
}

正直これで何が変わるのか、いまいちよくわかっていないのですが…効果があると良いな…？
ともかく、やらないよりはやった方が良いはずなので、とりあえず修正しておきます。

以上、React Native アプリで「VirtualizedList: You have a large list that is slow to update」エラーが発生した時の対処方法についてでした。
ご参考になれば幸いです。