تقليل إعادة الرسم: memo والتخزين المؤقت

import { useState, memo } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native'; const InfoCard = memo(function InfoCard({ title }) {  console.log('رُسِمت البطاقة:', title);     // يُطبع مرّةً فقط  return <Text style={styles.card}>{title}</Text>;}); export default function App() {  const [n, setN] = useState(0);  return (    <View style={styles.box}>      <Text style={styles.n}>العدّاد: {n}</Text>      <InfoCard title="بطاقة ثابتة" />      <Pressable style={styles.btn} onPress={() => setN(n + 1)}>        <Text style={styles.bt}>زيادة</Text>      </Pressable>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center', gap: 10 },  n: { fontSize: 24, fontWeight: 'bold' },  card: { backgroundColor: '#FFF3E0', padding: 12, borderRadius: 10, color: '#E8820C', fontWeight: 'bold' },  btn: { backgroundColor: '#E8820C', padding: 10, borderRadius: 8 },  bt: { color: 'white' },});

import { useState, useMemo } from 'react';import { View, Text, TextInput, StyleSheet } from 'react-native'; function heavySum(n) {  let s = 0;  for (let i = 0; i < n * 1000; i++) s += i;   // عمليّة مكلفة  return s;} export default function App() {  const [n, setN] = useState('5');  const [other, setOther] = useState('');  const num = Number(n) || 0;  const result = useMemo(() => heavySum(num), [num]);   // يُحسب فقط عند تغيّر num   return (    <View style={{ padding: 20, gap: 10 }}>      <TextInput style={styles.in} keyboardType="numeric" value={n} onChangeText={setN} placeholder="رقم" />      <Text style={styles.r}>نتيجة الحساب الثقيل: {result}</Text>      <TextInput style={styles.in} value={other} onChangeText={setOther} placeholder="اكتب هنا (لا يعيد الحساب)" />    </View>  );} const styles = StyleSheet.create({  in: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 8 },  r: { fontWeight: 'bold', color: '#2E7D32' },});