frontend-interview-questions

1. طراحی یک کامپوننت مدال قابل استفاده مجدد در React که بتوان آن را از هر جای اپلیکیشن فعال کرد

رویکرد: استفاده از context و portal

// ModalContext.tsx
const ModalContext = createContext(null);
export const useModal = () => useContext(ModalContext);

export function ModalProvider({ children }) {
  const [content, setContent] = useState(null);

  return (
    <ModalContext.Provider value=>
      {children}
      {content &&
        ReactDOM.createPortal(
          <div className="modal-backdrop">{content}</div>,
          document.body
        )}
    </ModalContext.Provider>
  );
}

نحوه استفاده:

const { setContent } = useModal();
setContent(<MyModalContent onClose={() => setContent(null)} />);


2. اگر یک کامپوننت React نیاز داشته باشد از چند API داده بگیرد و نتایج را ترکیب کند، چه کاری انجام می‌دهید؟

رویکرد:

useEffect(() => {
  const fetchData = async () => {
    const [user, posts] = await Promise.all([
      fetch("/api/user").then((res) => res.json()),
      fetch("/api/posts").then((res) => res.json()),
    ]);
    setData({ user, posts });
  };
  fetchData();
}, []);

نکته اضافه: مدیریت وضعیت بارگذاری/خطا و استفاده از AbortController برای پاکسازی


3. اگر مسئول بازسازی یک کد React قدیمی و نامرتب باشید، از کجا شروع می‌کنید؟

رویکرد:

  1. بررسی کد: ساختار، lint، منطق تکراری، کد بدون استفاده
  2. اضافه کردن lint و فرمت: ESLint، Prettier
  3. جدا کردن کامپوننت‌های قابل استفاده مجدد در پوشه shared/
  4. نوشتن تست برای مسیرهای حیاتی قبل از بازسازی
  5. تبدیل کلاس‌ها به hook اگر امکان‌پذیر باشد
  6. شروع به استفاده از TypeScript به صورت تدریجی، از بخش‌های عمومی و utils


4. چگونه قابلیت کشیدن و رها کردن (drag & drop) آیتم‌ها در یک لیست را در React پیاده‌سازی می‌کنید؟

ابزار: استفاده از @dnd-kit/core یا react-beautiful-dnd

مثال با react-beautiful-dnd:

<DragDropContext onDragEnd={handleDragEnd}>
  <Droppable droppableId="list">
    {(provided) => (
      <ul {...provided.droppableProps} ref={provided.innerRef}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided) => (
              <li
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                {item.name}
              </li>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </ul>
    )}
  </Droppable>
</DragDropContext>


5. اگر مسئول ساخت یک داشبورد با داده‌های به‌روزرسانی بلادرنگ در React باشید، چه رویکردی اتخاذ می‌کنید؟

معماری:

استراتژی کامپوننت‌ها:

زیرساخت:


6. اگر یک ذی‌نفع فیچری بخواهد که با اهداف عملکرد یا دسترسی‌پذیری در تضاد باشد، چه می‌کنید؟

رویکرد:


7. طراحی یک جدول داده قابل استفاده مجدد در React با قابلیت مرتب‌سازی، فیلتر و صفحه‌بندی

API کلی:

<DataTable
  data={data}
  columns={[
    { key: "name", label: "Name", sortable: true },
    { key: "email", label: "Email" },
  ]}
  pagination=
  onSort={(key, direction) => {}}
  onFilter={(query) => {}}
/>

نکات پیاده‌سازی:


8. اگر یک اپ React به شما واگذار شود که تست ندارد و مستندات ضعیف است، برای بهبود آن چه برنامه‌ای دارید؟

برنامه:

  1. شناسایی مسیرهای حیاتی (مثلاً ورود، پرداخت)
  2. ابتدا نوشتن تست‌های یکپارچه با React Testing Library
  3. افزودن تست واحد برای منطق‌های کمکی و کامپوننت‌های مشترک
  4. استفاده از JSDoc و Storybook برای مستندسازی بهتر
  5. راه‌اندازی CI برای بررسی پوشش تست و lint
  6. ایجاد راهنمای مشارکت برای اجباری کردن تست در هر مشارکت


9. چگونه یک API شخص ثالث با محدودیت نرخ را در یک اپلیکیشن React طوری ادغام می‌کنید که تجربه کاربر خراب نشود؟

استراتژی‌ها:

const fetcher = async (url) => {
  const res = await fetch(url);
  if (res.status === 429) {
    await new Promise((r) => setTimeout(r, 1000)); // simple backoff
    return fetcher(url);
  }
  return res.json();
};
This site is open source. Improve this page.