উত্তর: ব্রাউজারে রান করা **scripting ভাষা**, যা **dynamic** ও **object-oriented**।
var, let, const এর পার্থক্য কি?উত্তর: var = **function-scoped**; let = **block-scoped**; const = block-scoped, এবং এর মান পরিবর্তন করা যায় না (**immutable**)।
উত্তর: একটি ফাংশন যা **outer scope-এর ভ্যারিয়েবল মনে রাখে**। ব্যবহার: **private variables**, **function factory**।
উত্তর: Variable ও function declaration-গুলি compile-time-এ তাদের scope-এর **top-এ আনা হয়**।
উত্তর: **asynchronous কাজগুলো** (যেমন: setTimeout, API call) পরিচালনা করার মেকানিজম।
উত্তর: Object-এর prototype-গুলির শৃঙ্খল, যা একটি Object কোনো property বা method খুঁজে না পেলে উপরের দিকে খুঁজতে থাকে।
async/await কিভাবে কাজ করে?উত্তর: Promise = ভবিষ্যতের **async operation-এর ফলাফল**। async/await = Promise-এর উপরে থাকা **সিনট্যাক্টিক সুগার** যা asynchronous কোডকে synchronous-এর মতো দেখতে সহজ করে তোলে।
উত্তর: Function যা অন্য function-কে **argument হিসেবে** পাঠানো হয়। সমস্যা: deep nesting এ **Callback hell** সমস্যা হয়।
== and ===উত্তর: == **type coercion** করে (মান ও টাইপ আলাদা হলেও তুলনা করে), === **মান এবং টাইপ** উভয়ই চেক করে।
উত্তর: **Bubbling** = event **child থেকে parent-এর দিকে** যায়; **Capturing** = event **parent থেকে child-এর দিকে** আসে।
উত্তর: React হলো **UI তৈরি করার জন্য JavaScript লাইব্রেরি**। ফিচার: **Component-based**, **Virtual DOM**, **Reusable UI elements**।
উত্তর: JSX হলো **HTML-এর মতো সিনট্যাক্স** যা JavaScript-এর মধ্যে লেখা হয়। এটি React Element তৈরি করতে সাহায্য করে।
উত্তর: **Element** হলো React-এর **smallest UI unit** (একটি simple JavaScript Object)। **Component** হলো function/class যা UI অংশকে **define** করে (Element তৈরি করে)।
উত্তর: **State** = component-controlled, **mutable** (পরিবর্তনশীল); **Props** = parent থেকে child এ pass করা, **immutable** (অপরিবর্তনশীল)।
উত্তর: **Mounting** (Component তৈরি) = componentDidMount, **Updating** (Component আপডেট) = componentDidUpdate, **Unmounting** (Component সরিয়ে ফেলা) = componentWillUnmount (Hooks ব্যবহার না করে Class Component-এ)।
useState, useEffect, useContext, useReducer, useMemo, useCallbackউত্তর: Function-based components-এ **state/lifecycle** ব্যবহার করার উপায়।
উত্তর: **Virtual DOM** হলো real DOM-এর একটি **lightweight copy** (JavaScript Object)। **Reconciliation** হলো V-DOM পরিবর্তন খুঁজে real DOM-এ শুধুমাত্র পরিবর্তিত অংশটুকু আপডেট করার প্রক্রিয়া।
উত্তর: **Controlled** = form-এর value **React state দ্বারা** control করা হয়; **Uncontrolled** = **DOM থেকে direct** value নেওয়া হয় (সাধারণত useRef দিয়ে)।
উত্তর: Class Component যা তার child component-এর JavaScript error-গুলি ধরে এবং একটি **fallback UI** দেখায়।
উত্তর: **Lazy loading** = প্রয়োজন অনুযায়ী code **load**; **Code splitting** = app-এর bundle **ভাগ করে load**; **Suspense** = lazy-loaded component লোড হওয়ার সময় **fallback UI** দেখায়।
React.memo কি?উত্তর: **High-order component** যা functional component-কে **unnecessary re-renders** থেকে রক্ষা করে (Props পরিবর্তন না হলে render করবে না)।
useRef কি এবং কোথায় ব্যবহার হয়?উত্তর: **DOM elements access** করার জন্য বা কম্পোনেন্টের মধ্যে mutable কিন্তু re-render ট্রিগার করে না এমন **reference store** করতে।
useLayoutEffect vs useEffect পার্থক্যউত্তর: useLayoutEffect **synchronous** (DOM মিউটেশনের পরে কিন্তু ব্রাউজার পেইন্টিং-এর আগে চলে), useEffect **asynchronous** (ব্রাউজার পেইন্টিং-এর পরে চলে)।
উত্তর: **Global state management**-এর জন্য, যখন **props drilling** (অনেকগুলি component-এর মধ্য দিয়ে props পাস করা) এড়িয়ে যেতে হয়।
উত্তর: একটি function যা একটি component নিয়ে **enhanced component** return করে।
উত্তর: একটি technique যেখানে একটি component-এর **render logic** একটি **function props** ব্যবহার করে share করা হয়।
উত্তর: **Memoization** (useMemo, useCallback, React.memo), **lazy loading**, **code splitting**, **virtualization**, **inline anonymous functions avoid** করা।
উত্তর: React-এর একটি **full-stack framework** যা **SSR (Server-Side Rendering)**, **SSG (Static Site Generation)**, এবং **API routes** সাপোর্ট করে।
উত্তর: **SEO-friendly** (SSR/SSG-এর কারণে), **page-based routing**, ভালো **performance**, **API routes** দ্বারা backend তৈরি করার সুবিধা।
উত্তর: **CSR (Client-Side Render)** = ক্লায়েন্ট-সাইডে generate, **initial load slower**। **SSR (Server-Side Render)** = সার্ভার-সাইডে render, **SEO friendly**, **fast initial load**।
[param].jsউত্তর: pages/[param].js (Pages Router-এ) ব্যবহার করে **ডাইনামিক URL** (যেমন: /posts/1, /posts/2) তৈরি করা যায়।
উত্তর: pages/api (বা app/api App Router-এ) ফোল্ডারে Node.js code ব্যবহার করে **backend route** তৈরি করা যায়।
getStaticProps, getServerSideProps, getStaticPaths ব্যাখ্যাউত্তর: **getStaticProps** = **build time** এ ডেটা fetch করে SSG-এর জন্য। **getServerSideProps** = **প্রতিটি রিকোয়েস্ট-এ** সার্ভার-সাইডে ডেটা fetch করে SSR-এর জন্য। **getStaticPaths** = SSG-এর জন্য **ডাইনামিক পাথ** ([param]) তৈরি করে।
উত্তর: **next/image** component ব্যবহার করে automatic **image optimization** (lazy loading, resizing, format) করা যায়।
উত্তর: Request/response process করার জন্য, যেমন: **authentication চেক**, **ইউআরএল রিরাইট**।
উত্তর: Static page-কে **নির্দিষ্ট সময় পর পর** (revalidate প্রপার্টি ব্যবহার করে) background-এ **আপডেট** করা হয়।
উত্তর: **App Router** নতুন, **server components**, **layouts**, **nested routing** এবং data fetching আরও ভালোভাবে সাপোর্ট করে। **Pages Router** হলো পূর্ববর্তী পদ্ধতি।
উত্তর: একটি **Predictable global state container** যা UI অ্যাপ্লিকেশনগুলির জন্য ব্যবহার করা হয়।
উত্তর: **Store** = পুরো অ্যাপ্লিকেশন-এর **state** hold করে; **Action** = state পরিবর্তন করার জন্য **instruction** (একটি simple Object); **Reducer** = **pure function** যা state ও action নিয়ে নতুন state return করে।
redux-thunk, redux-sagaউত্তর: Store ও Reducer-এর মাঝে থাকে, যা **Async actions** (যেমন: API call) handle করার জন্য ব্যবহৃত হয়।
createSlice, createAsyncThunkউত্তর: Redux-এর standard way, যা **Boilerplate কমায়**। **createSlice** = Reducer, Action ও State কে একত্রে তৈরি করে। **createAsyncThunk** = asynchronous logic (API call) সহজ করে।
উত্তর: **Predictability** বাড়ায়, **debugging সহজ** করে এবং React-এর performance optimization (যেমন: PureComponent/React.memo) কাজ করতে সাহায্য করে।
উত্তর: state changes **trace** এবং **debugging** (time-travel debugging) সহজ করে।
combineReducers কি?উত্তর: Multiple reducers-কে একত্রিত করে **root reducer** তৈরি করে।
reselect ব্যাখ্যাউত্তর: **Selector** = State থেকে নির্দিষ্ট অংশ **select** করে। **reselect** = Selector-কে **memoize** করে performance improve করে।
উত্তর: একটি **Minimalist state-management library**, যা **hooks** ব্যবহার করে। Redux-এর তুলনায় অনেক কম boilerplate প্রয়োজন হয়।
উত্তর: **Lightweight**, **simple syntax**, **performance optimization** (শুধুমাত্র প্রয়োজনীয় অংশ rerender হয়)।
উত্তর: **Redux** বড় apps, boilerplate বেশি; **Zustand** ছোট-medium apps, কম boilerplate, এবং এটি Redux-এর মতো Immutability এনফোর্স করে না।
উত্তর: State থেকে **নির্দিষ্ট অংশ select** করে **render optimize** করে।
উত্তর:
import create from "zustand";
const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));
persist, devtoolsউত্তর: **persist** = State-কে লোকাল স্টোরেজে ধরে রাখে। **devtools** = Redux DevTools-এর সাথে ইন্টিগ্রেট করে।
উত্তর: **জটিল অ্যাপ** এবং বড় দলের জন্য → **Redux Toolkit**। **মাঝারি** বা সিম্পল অ্যাপের জন্য → **Zustand** বা **Context API**।
উত্তর: SEO-এর জন্য **SSR/SSG** (Next.js data fetching methods) ব্যবহার করে পেজ render করা। Global UI/auth state-এর জন্য **Zustand** বা **Context API** ব্যবহার করা।
উত্তর: **Memoization** (useMemo, useCallback, React.memo), **selector** ব্যবহার করে শুধুমাত্র প্রয়োজনীয় state অংশ অ্যাক্সেস করা।
উত্তর: Next.js ব্যবহার করে। **Static/SEO-critical** অংশ SSR/SSG করা এবং **user-specific/dynamic** অংশকে **CSR** (ক্লায়েন্ট-সাইডে fetch) করা। **Lazy loading**, **code splitting**, এবং **caching** ব্যবহার করা।
উত্তর: **Error Boundaries** ব্যবহার করা, API call-এর জন্য **try/catch** ব্লক ব্যবহার করা, এবং **logging service**-এ error রিপোর্ট করা।
উত্তর: API call-এ **Debounce** বা **Throttling** ব্যবহার করা, ডেটা **caching** করা, এবং fetch করা ডেটাকে **memoization** করা।
উত্তর: **Route-based splitting** (প্রতিটি রুটের জন্য আলাদা JS ফাইল), **component-based splitting** (React.lazy ব্যবহার করে)।
উত্তর: **Unit testing** (ছোট ফাংশন), **Integration testing** (কম্পোনেন্ট ইন্টারঅ্যাকশন), **Snapshot testing** (UI-এর পরিবর্তন ট্র্যাক করার জন্য)।
উত্তর: **JWT (JSON Web Token)**, **cookies** ব্যবহার করা। **Server-side auth guards** (যেমন: getServerSideProps বা Middleware-এ) ব্যবহার করে অ্যাক্সেস কন্ট্রোল করা।