ইন্টারভিউ প্রশ্নব্যাংক — React

// প্রোডাক্ট পেজ
function ProductPage() {
  const [quantity, setQuantity] = useState(1);

  return (
    <div>
      <h3>প্রোডাক্ট সংখ্যা: {quantity}</h3>
      <button onClick={() => setQuantity(quantity + 1)}>সংখ্যা বাড়ান</button>

      {/* quantity বদলালে ProductPage Re-render হবে, 
          ফলে ReviewSection-ও অহেতুক Re-render হবে (যদি Optmized না থাকে) */}
      <ReviewSection productId="p-101" />
    </div>
  );
}

import React, { useState, useCallback, memo } from "react";

// চাইল্ড কম্পোনেন্ট: React.memo দিয়ে আটকানো হলো
const CartButton = memo(function CartButton({ onAddToCart }) {
  console.log("CartButton রেন্ডার হলো!");
  return <button onClick={onAddToCart}>কার্টে যোগ করুন</button>;
});

function ProductCard() {
  const [likeCount, setLikeCount] = useState(0);

  // useCallback দেওয়াতে likeCount বাড়লেও এই ফাংশনের রেফারেন্স বদলাবে না
  const handleAddToCart = useCallback(() => {
    console.log("প্রোডাক্ট কার্টে যোগ হয়েছে");
  }, []);

  return (
    <div>
      <button onClick={() => setLikeCount(likeCount + 1)}>
        ❤️ {likeCount}
      </button>
      {/* লাইক বাড়লেও CartButton অহেতুক re-render হবে না */}
      <CartButton onAddToCart={handleAddToCart} />
    </div>
  );
}

import { useState, useRef, useLayoutEffect } from "react";

// টুলটিপ পজিশন ঠিক করার কম্পোনেন্ট
function Tooltip({ buttonRef, text }) {
  const [topPosition, setTopPosition] = useState(0);

  // useLayoutEffect ব্যবহার করায় ইউজার ভুল পজিশন দেখবে না (Flicker হবে না)
  useLayoutEffect(() => {
    const rect = buttonRef.current.getBoundingClientRect();
    setTopPosition(rect.top - 30); // স্ক্রিনে আকার আগেই পজিশন সেট হবে
  }, [buttonRef]);

  return <div style={{ position: "absolute", top: topPosition }}>{text}</div>;
}

function UserProfileForm() {
  // Controlled: ব্যবহারকারীর নাম প্রতি কি-স্ট্রোকে স্টেট আপডেট করছে
  const [username, setUsername] = useState("");

  // Uncontrolled: ফাইল ইনপুট স্টেটে রাখা যায় না, তাই Ref ব্যবহার
  const avatarRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const file = avatarRef.current.files[0];
    console.log(`ইউজার: ${username}, আপলোড ফাইল: ${file?.name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="file" ref={avatarRef} />
      <button type="submit">সেভ করুন</button>
    </form>
  );
}

import React, { lazy, Suspense } from "react";
import { FixedSizeList } from "react-window";

// ১. Lazy Loading: এডমিন পেজ প্রয়োজন হলেই কেবল লোড হবে
const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));

// ২. Virtualization: ১০,০০০ প্রোডাক্টের লিস্ট স্ক্রিনে শুধু ১০টি দেখাবে
function HugeProductList({ products }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={products.length}
      itemSize={50}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>
          {products[index].name} - ৳{products[index].price}
        </div>
      )}
    </FixedSizeList>
  );
}

// Axios Interceptor দিয়ে অটো-টোকেন রিফ্রেশ লজিক
import axios from "axios";

const api = axios.create({ baseURL: "https://api.myApp.com" });
let accessToken = null;

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    // টোকেনের মেয়াদ শেষ হয়ে ৪০১ এরর এলে
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      try {
        // ব্যাকগ্রাউন্ডে নতুন Access Token চাওয়া
        const res = await axios.post(
          "/api/refresh-token",
          {},
          { withCredentials: true },
        );
        accessToken = res.data.accessToken;

        // নতুন টোকেন দিয়ে আগের আটকে যাওয়া এপিআই আবার কল করা
        originalRequest.headers.Authorization = `Bearer ${accessToken}`;
        return api(originalRequest);
      } catch (err) {
        window.location.href = "/login"; // রিফ্রেশ টোকেনও এক্সপায়ার হলে লগইন পেজে পাঠানো
      }
    }
    return Promise.reject(error);
  },
);

// ই-কমার্স শপিং কার্ট স্লাইস (RTK)
import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [], totalAmount: 0 },
  reducers: {
    // Immer-এর কারণে আমরা সরাসরি push করতে পারছি
    addToCart: (state, action) => {
      state.items.push(action.payload);
      state.totalAmount += action.payload.price;
    },
    clearCart: (state) => {
      state.items = [];
      state.totalAmount = 0;
    },
  },
});

export const { addToCart, clearCart } = cartSlice.actions;
export default cartSlice.reducer;