浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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

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

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」エラーが発生した時の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)