State Preservation

State Preservation: چه زمانی React خودش State را حفظ می‌کند

در دو درس قبل دیدیم که هویت یک کامپوننت از نوع، موقعیت و در صورت وجود، key آن ساخته می‌شود. در این درس، به‌طور مشخص روی سمت مثبت ماجرا تمرکز می‌کنیم: در چه شرایطی React، بدون هیچ کار اضافه‌ای از طرف ما، State یک کامپوننت را بین رندرهای مختلف حفظ می‌کند؟

شرط پایه: هویت ثابت بماند

همان‌طور که در دو درس قبل دیدیم، تا زمانی که نوع، موقعیت در درخت و key (در صورت وجود) یک عنصر بین دو رندر عوض نشوند، React همان نمونه را نگه می‌دارد. این یعنی State Preservation، رفتار پیش‌فرض React است، نه یک ویژگی خاص که باید فعال شود.

تغییر Props، State را پاک نمی‌کند

یک نکته‌ای که ارزش تکرار دارد: عوض شدن مقدار Props، به‌تنهایی هیچ اثری روی State ندارد. کامپوننت زیر را در نظر بگیرید:

function Avatar({ src }) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <img
      src={src}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ opacity: isHovered ? 0.7 : 1 }}
    />
  );
}

اگر والد این کامپوننت، مقدار src را عوض کند، تصویر عوض می‌شود اما isHovered دست‌نخورده باقی می‌ماند؛ چون همان نمونه Avatar است، فقط با Prop جدید.

حفظ State در چند لایه از درخت

State Preservation فقط به خود کامپوننت محدود نیست؛ اگر کل زیردرخت زیر یک گره ثابت بماند (نوع و موقعیت همه گره‌ها یکسان بماند)، State تمام آن زیردرخت حفظ می‌شود، حتی اگر چند لایه عمیق باشد:

function Panel({ title }) {
  return (
    <section>
      <h3>{title}</h3>
      <Counter />
    </section>
  );
}

با تغییر title، Panel دوباره رندر می‌شود، اما چون Counter در همان موقعیت (فرزند دوم section) باقی مانده، State آن هم حفظ می‌شود؛ کاملاً مستقل از اینکه چند لایه بالاتر، چه Propی عوض شده است.

حفظ State حتی وقتی محتوای متنی اطراف تغییر می‌کند

ساختار درخت مهم است، نه محتوای واقعی متن یا مقادیر اطراف. اضافه یا کم شدن یک پاراگراف متنی ساده (که خودش گره‌ای با State نیست)، هویت گره‌های کناری را که نوع و موقعیت‌شان ثابت مانده، به‌هم نمی‌ریزد؛ آنچه واقعاً هویت را به‌هم می‌زند، تغییر در ساختار عناصر (نوع یا ترتیب کامپوننت‌ها) است، نه صرفاً تغییر یک رشته متنی.

چرا این رفتار پیش‌فرض، مفید و منطقی است

اگر React با هر تغییر کوچک Props، State را پاک می‌کرد، هر فرمی که کاربر در حال پر کردنش بود، با هر تغییر جزئی در برنامه، خالی می‌شد؛ فوکوس هر input از بین می‌رفت؛ و انیمیشن‌های در حال اجرا هم دوباره از صفر شروع می‌شدند. حفظ State بر اساس هویت پایدار، تجربه‌ای روان‌تر و قابل‌پیش‌بینی‌تر برای کاربر می‌سازد.

مثال قابل اجرا

متن رنگ پس‌زمینه را عوض کنید و ببینید مقدار شمارنده داخل کامپوننت، بدون هیچ تغییری در کد شما برای این منظور، حفظ می‌شود.

حفظ خودکار State هنگام تغییر Props والد

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>شمارنده: {count}</button>;
}

function Panel({ color }) {
  return (
    <div style={{ background: color, padding: "10px" }}>
      <p>رنگ فعلی: {color}</p>
      <Counter />
    </div>
  );
}

function App() {
  const [color, setColor] = useState("lightyellow");

  return (
    <div>
      <Panel color={color} />
      <button onClick={() => setColor(color === "lightyellow" ? "lightblue" : "lightyellow")}>
        تغییر رنگ
      </button>
    </div>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

تا زمانی که نوع، موقعیت در درخت و key یک عنصر ثابت بماند، React به‌طور پیش‌فرض State آن را حفظ می‌کند؛ حتی اگر Props تغییر کند یا این حفظ‌شدن در چند لایه عمیق از درخت رخ دهد. این رفتار عمدی است و تجربه کاربری روان‌تری می‌سازد. در درس بعدی، به سمت مقابل این رفتار می‌رویم: State Reset، یعنی چگونه و چرا گاهی می‌خواهیم همین رفتار پیش‌فرض را بشکنیم.