reactjs - FlatList のレンダリングはビッグ データ セットに対して重い

Question

私のアプリケーションには、FlatList100 アイテムのデータセットがあります。各項目には複雑な UI があり、パフォーマンスに大きな負担がかかっていることに気付きました。リストのあるページの読み込みには最大 5 秒かかります。コンポーネントが初めてレンダリングされた瞬間に、データセット内のすべてのアイテムに対して のrenderItem関数FlatListも呼び出されることに気付きました。また、そのページの他のものに対して他の setState の変更があった場合にも発生することに気付きました. このフラット リストの再レンダリングを防ぐ方法、または少なくとも表示されているアイテムのみを再レンダリングする方法はありますか? ネイティブ Android の Recycle with のように? コンポーネントが最初に表示されたときに表示されているアイテムのみをレンダリングするにはどうすればよいですか? 私は使用しようとしましinitialNumToRenderたmaxToRenderPerBatchが、どちらも機能しませんでした。

コードの例を次に示します。

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {

  const [text, setText] = React.useState('')

  const renderItem = ({ item }) => {
    console.log("Render Item")
    return (<Item title={item.title} />)
};

  return (
    <SafeAreaView style={styles.container}>

      <TextInput
        value={text}
        onChangeText={(val) => setText(val)}
      />

      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        initialNumToRender={6}
        maxToRenderPerBatch={6}
      />

    </SafeAreaView>
  );
}

リスト全体に何かを入力しようとするとTextInput、再レンダリングされますが、リスト内の何も変更されていません..これを防ぐにはどうすればよいですか?