الأحداث ولقطات الحالة والتحديثات دون تعديل الأصل

import {useState} from 'react';
import {Pressable, Text} from 'react-native';
export default function App() {
  const [count, setCount] = useState(0);
  return <Pressable accessibilityRole="button" accessibilityLabel="Add one"
    onPress={() => setCount(previous => previous + 1)}>
    <Text>Count: {count}</Text>
  </Pressable>;
}

Initially Count: 0; after one activation, the next description is Count: 1.

يطلب المعالج تحديثا بدلا من تعديل count. الوحدة تفاعل أصلي توضيحي، وليست اختبار React منفذا.

function toggleId(selected, id) {
  return selected.includes(id) ? selected.filter(value => value !== id) : [...selected, id];
}
const before = ['w-7'];
const after = toggleId(before, 'w-9');
console.log(JSON.stringify(before));
console.log(JSON.stringify(after));
console.log(JSON.stringify(toggleId(after, 'w-7')));

["w-7"]
["w-7","w-9"]
["w-9"]

تحتفظ اللقطة الأصلية بـ w-7. وتنتج إضافة w-9 وإزالة w-7 مصفوفتين مستقلتين بعضوية واضحة.