{ریکت}:

State و Props چی‌ان؟ فرقشون چیه؟

تصور کن یه کامپوننت داری به اسم UserCard. حالا سوال:

· اون اطلاعاتی که از بیرون بهش می‌دی → Props
· اون اطلاعاتی که خودش نگه می‌داره و تغییر می‌ده → State

مثال:

Props = اطلاعاتی که از بیرون میاد

Props= اجازه تغییرش نداری

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} ساله</p>
    </div>
  );
}

// استفاده
<UserCard name="فاطمه" age={25} />

name و age دوتا props هستن که والد داده

UsetCard  فقط اونارو خونده

State = چیزی که خودت مدیریت می‌کنی

State مثل حالت داخلی خودته. می‌تونی تغییرش بدی و با تغییرش، UI دوباره رندر می‌شه.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      کلیک: {count}
    </button>
  );
}

count داخلیه
setCount تغییرش می‌ده
React دوباره رندر می‌کنه.


ارتباطشون چیه؟

State والد می‌تونه بشه Props فرزند!

function Parent() {
  const [name, setName] = useState("فاطمه");

  return <Child userName={name} />;
}

function Child({ userName }) {
  return <p>سلام {userName}</p>;
}

· name تو والد → State
· userName تو فرزند → Props

یعنی State یه جا زندگی می‌کنه، Props مسیر انتقالش به بقیه‌ست.

قانون طلایی

Props = ورودی
State = حافظه داخلی

هر چیزی که کاربر باهاش تعامل داره (تایپ، کلیک، انتخاب) → State
هر چیزی که از بالا میاد → Props


اشتباه رایج تازه‌کارها

تغییر مستقیم Props داخل کامپوننت

props.name = "نازی"; // ❌ هیچوقت!

اگه لازمه تغییر کنه، یا State بساز یا از والد بخواه تغییر بده.

هر وقت گیج شدی بپرس:
«این داده از کجا میاد؟»
اگه از بالا → Props
اگه خودش ساخته → State

همین یه سوال، 90%گیجی‌ها رو حل می‌کنه

@perfino_com