قياس الأداء وتقليل البطء

import { View, Text, FlatList, StyleSheet } from 'react-native'; const DATA = Array.from({ length: 200 }, (_, i) => ({ id: String(i), n: i + 1 })); export default function App() {  return (    <View style={{ height: 240 }}>      <Text style={styles.h}>200 عنصرًا — مرئيُّها فقط يُرسَم</Text>      <FlatList        data={DATA}        keyExtractor={(it) => it.id}        initialNumToRender={10}        renderItem={({ item }) => (          <Text style={styles.row}>الصفّ رقم {item.n}</Text>        )}      />    </View>  );} const styles = StyleSheet.create({  h: { fontWeight: 'bold', padding: 10, color: '#E8820C' },  row: { padding: 12, borderBottomWidth: 1, borderColor: '#eee' },});

import { useState, useRef } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native'; export default function App() {  const [n, setN] = useState(0);  const renders = useRef(0);  renders.current += 1;  console.log('عدد مرّات الرسم:', renders.current);   return (    <View style={styles.box}>      <Text style={styles.t}>القيمة: {n}</Text>      <Text style={styles.r}>رُسِم {renders.current} مرّة</Text>      <Pressable style={styles.btn} onPress={() => setN(n + 1)}>        <Text style={styles.bt}>زيادة</Text>      </Pressable>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center' },  t: { fontSize: 24, fontWeight: 'bold' },  r: { color: '#888', marginTop: 4 },  btn: { backgroundColor: '#E8820C', padding: 10, borderRadius: 8, marginTop: 12 },  bt: { color: 'white' },});