آزمون جامع React.js

تفاوت اصلی رویکرد توصیفی React با برنامه‌نویسی دستوری سنتی در ساخت رابط کاربری چیست؟

خروجی رندر کد زیر چیست؟

function Cart({ count }) {
  return <div>{count && <p>{count} کالا</p>}</div>;
}

// استفاده: <Cart count={0} />

چرا استفاده از index آرایه به‌عنوان key، در لیستی که ترتیب یا تعدادش تغییر می‌کند، مشکل‌ساز است؟

پس از یک کلیک، مقدار نهایی count در کد زیر چیست؟

const [count, setCount] = useState(5);

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount((prev) => prev + 1);
}

چرا ممکن است رابط کاربری پس از کلیک در کد زیر به‌روز نشود؟

const [user, setUser] = useState({ name: "سارا", age: 25 });

function handleBirthday() {
  user.age = user.age + 1;
  setUser(user);
}

کدام مورد باید به‌جای یک State جداگانه، مستقیماً در بدنه کامپوننت محاسبه شود؟

چرا منطق ارسال فرم معمولاً روی onSubmit خود فرم نوشته می‌شود، نه onClick دکمه؟

کد زیر چه مشکلی دارد؟

function Profile({ isLoggedIn }) {
  if (isLoggedIn) {
    const [name, setName] = useState("");
  }

  return <p>سلام</p>;
}

پس از چند کلیک روی دکمه، تایمر در کد زیر چه مقداری را چاپ می‌کند؟

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

  useEffect(() => {
    const id = setInterval(() => console.log(count), 1000);
    return () => clearInterval(id);
  }, []);

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

وقتی Dependency یک Effect تغییر می‌کند، ترتیب درست اجرا کدام است؟

سؤال ۱۱. تغییر مقدار current یک useRef چه تفاوتی با تغییر State دارد؟

سؤال ۱۲. وقتی value یک Context Provider تغییر می‌کند، چه اتفاقی می‌افتد؟

سؤال ۱۳. کدام مورد درباره تابع Reducer در useReducer درست است؟

با کلیک روی دکمه A، مقدار نمایش‌داده‌شده در B چه می‌شود؟

function useToggle() {
  const [on, setOn] = useState(false);
  return [on, () => setOn(!on)];
}

function A() {
  const [on, toggle] = useToggle();
  return <button onClick={toggle}>A: {String(on)}</button>;
}

function B() {
  const [on] = useToggle();
  return <p>B: {String(on)}</p>;
}

سؤال ۱۵. کدام جمله درباره Render و Commit درست است؟

با هر کلیک روی دکمه، کدام کامپوننت‌ها دوباره Render می‌شوند؟

function Footer() {
  console.log("Footer رندر شد");
  return <p>پایین صفحه</p>;
}

function App() {
  const [n, setN] = useState(0);

  return (
    <div>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <Footer />
    </div>
  );
}

وقتی id تغییر کند، State داخلی Form چه می‌شود؟

// Form خودش یک useState داخلی دارد
function App() {
  const [id, setId] = useState(1);

  return <Form key={id} userId={id} />;
}

با تغییر wide، State داخلی Counter چه می‌شود؟

// Counter خودش یک useState داخلی دارد
function Page({ wide }) {
  return wide ? (
    <div className="wide">
      <Counter />
    </div>
  ) : (
    <Counter />
  );
}

چرا memo در کد زیر جلوی Render مجدد Card را نمی‌گیرد؟

const Card = React.memo(function Card({ style }) {
  return <div style={style}>محتوا</div>;
});

function Parent() {
  const [n, setN] = useState(0);

  return (
    <>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <Card style={{ color: "red" }} />
    </>
  );
}

سؤال ۲۰. Race Condition در دریافت داده با useEffect دقیقاً چه زمانی رخ می‌دهد؟

مقدار برگشتی useParams برای یک پارامتر مسیر مثل /products/:id از چه نوعی است؟

تفاوت اصلی Server State با Client State چیست؟

کدام خطا توسط Error Boundary گرفته نمی‌شود؟

چرا استفاده از button به‌جای div با onClick برای دسترس‌پذیری بهتر است؟

کدام تست از دید کاربر نوشته شده، نه وابسته به جزئیات پیاده‌سازی؟

اگر دانلود یک کامپوننت lazy به‌کلی شکست بخورد، کدام مکانیزم آن را مدیریت می‌کند؟

در جست‌وجوی زنده روی یک لیست سنگین، چرا مقدار خود فیلد ورودی نباید Transition شود؟

کدام استفاده از useId درست است؟

کدام مقدار را نمی‌توان از یک Server Component به‌عنوان Prop به Client Component داد؟

کدام مورد جزو وظایف اصلی یک Bundler یا Build Tool است؟