نستخدم useState لإدارة حالة القيم داخل المكون: قيمة يتذكرها المكون، وعندما تتغير تتحدث الواجهة تلقائيًا.

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name || 'stranger'}</p>
    </>
  );
}

لماذا لا يكفي متغير عادي؟

المتغير العادي يُنسى في كل مرة يُرسم فيها المكون، وتغييره لا يحدّث الواجهة. useState يحفظ القيمة ويعيد الرسم عند تغيرها.

لتحميل البيانات من الخادم نستخدم عادة useEffect مع useState.