عند عرض البيانات داخل flatlist يصبح التطبيق بطيئ react native sqlite

ربما يكون سبب بطء التطبيق هو أن FlatList يقوم بإنشاء مجموعة من العناصر، ثم يقوم بإعادة إنشاء تلك المجموعة كلما تم تغيير البيانات، وذلك يؤدي إلى استهلاك كبير للذاكرة وزيادة استخدام وحدة المعالجة المركزية.

• حاول استخدام VirtualizedList بدلاً من FlatList، وهو نوع من FlatList يتجنب إعادة إنشاء مجموعة العناصر بالكامل كلما تم تغيير البيانات، كالتالي:

import React, { Component } from "react";
import { VirtualizedList } from "react-native";


class MyComponent extends Component {
  state = {
    items: [
      {
        id: 1,
        name: "Mohamed",
      },
      {
        id: 2,
        name: "Ahmed",
      },
    ],
  };


  render() {
    return (
      <VirtualizedList
        data={this.state.items}
        renderItem={({ item }) => (
          <Text key={item.id}>{item.name}</Text>
        )}
      />
    );
  }
}

أيضًا استخدام React.memo لتجنب إعادة رسمها بشكل غير ضروري عندما لا تتغير البيانات.

const MyComponent = React.memo(function MyComponent(props) {
  // ...
});

أو استخدم PureComponent كالتالي:

class MyComponent extends PureComponent {
  // ...
}

بالإضافة إلى الاستفادة من خاصية initialNumToRender من أجل تحسين أداء FlatList عن طريق تحديد عدد العناصر التي يتم تقديمها أوليًا.

<FlatList
  data={yourData}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  initialNumToRender={10} // يمكن تعديل هذا الرقم حسب الحاجة
/>

مع عدم القيام بعمليات ثقيلة مثل الحسابات المعقدة أو الاستعلامات الكبيرة داخل دالة renderItem، وحاول تجربة خاصية windowSize أيضًا لضبط عدد العناصر التي تظهر في النافذة في أي وقت، بالإضافة إلى keyExtractor لتحديد مفتاح فريد لكل عنصر في مجموعة البيانات.

<FlatList
  data={yourData}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  windowSize={10} //  التعديل حسب الحاجة
/>