شرح صفوف ومحتوى الفقرة
تتميز النصوص والأرقام والقيم المنطقية في JavaScript بكونها قيماً أولية غير قابلة للتغيير، أما الكائنات (Objects) فهي مراجع قابلة للتعديل في مكانها، مما قد يغري المبرمج بكتابة cursor.x = 120 ثم setCursor(cursor). في React يجب معاملة أي كائن مخزن في الحالة بوصفه للقراءة فقط.
السبب الهندسي واضح: تفحص React تطابق الحالة السابقة والجديدة بالدالة Object.is()؛ فإذا عدلت نفس الكائن وأعدت تمرير مرجعه ذاته، تحسبها React غير متغيرة وتتجاهل إعادة رسم الشاشة تماماً.
HTML
import { useState } from 'react';
function BadgeMover() {
const [pos, setPos] = useState({ x: 0, y: 0 });
const moveX = () =>
setPos({ x: pos.x + 20, y: pos.y });
return <button onClick={moveX}>X: {pos.x}px</button>;
}