- What causes a React component to re-render? ( একটি React কম্পোনেন্ট কেন রি-রেন্ডার হয়? )
Answer: A React component generally re-renders when its state, props, or parent changes, though specialized triggers like Context updates or key changes can also cause it. (সাধারণত একটি React কম্পোনেন্টের state, props, অথবা parent পরিবর্তন হলে এটি রি-রেন্ডার হয়, তবে Context update বা key পরিবর্তনের মতো কিছু বিশেষ কারণেও এটি হতে পারে।)
import { useState } from "react";
export const ReRenderExample = () => {
const [count, setCount] = useState(0);
return (
<div>
{/* 1️⃣ State change triggers re-render */}
<button onClick={() => setCount(prev => prev + 1)}>
Count: {count}
</button>
{/* 2️⃣ Props change triggers re-render */}
<Child value={count} />
{/* 3️⃣ Key change triggers re-render */}
<Child key={count} value={count} />
</div>
);
};
const Child = ({ value }: { value: number }) => {
console.log("Child rendered:", value);
return <p>Child value: {value}</p>;
};- What is the difference between useEffect and useLayoutEffect? ( useEffect এবং useLayoutEffect-এর মধ্যে পার্থক্য কী? )
Answer: The main difference is timing: useEffect runs asynchronously after the browser paints the screen, while useLayoutEffect runs synchronously before the paint, making it ideal for measuring DOM elements or avoiding visual flickers. ( মূল পার্থক্য হলো টাইমিং: useEffect ব্রাউজারে স্ক্রিন রেন্ডার হওয়ার পর অ্যাসিনক্রোনাসভাবে কাজ করে, যেখানে useLayoutEffect রেন্ডার হওয়ার আগে সিনক্রোনাসভাবে কাজ করে, যা DOM এলিমেন্ট পরিমাপ বা ভিজ্যুয়াল ফ্লিকার এড়াতে উপযুক্ত। )
import { useEffect, useLayoutEffect, useRef } from "react";
export const EffectVsLayoutEffect = () => {
const boxRef = useRef<HTMLDivElement>(null);
// ✅ Runs AFTER the browser paints (safe, non-blocking)
useEffect(() => {
console.log("useEffect: Box width is", boxRef.current?.offsetWidth);
}, []);
// ⚠️ Runs BEFORE paint (blocks rendering!)
// Heavy work here can cause UI to freeze or flicker
useLayoutEffect(() => {
console.log("useLayoutEffect: Box width is", boxRef.current?.offsetWidth);
}, []);
return (
<div
ref={boxRef}
style={{
width: 200,
height: 50,
backgroundColor: "lightgreen",
textAlign: "center",
lineHeight: "50px",
}}
>
Box
</div>
);
};- Why are keys important when rendering lists in React? ( React-এ লিস্ট রেন্ডার করার সময় key কেন গুরুত্বপূর্ণ? )
Answer: Keys help React identify which items in a list have changed, been added, or been removed, allowing it to efficiently update only the necessary parts of the DOM instead of re-rendering the entire list. ( Key-গুলো React-কে চিনতে সাহায্য করে একটি লিস্টের কোন আইটেমগুলো পরিবর্তিত হয়েছে, যুক্ত হয়েছে বা বাদ দেওয়া হয়েছে, যার ফলে পুরো লিস্ট রি-রেন্ডার করার বদলে এটি শুধুমাত্র প্রয়োজনীয় অংশগুলো দক্ষতার সাথে আপডেট করতে পারে। )
export const ListExample = () => {
const items = ["Apple", "Banana", "Orange"];
return (
<>
{/* ❌ BAD: index as key */}
{items.map((item, index) => (
<p key={index}>{item}</p>
))}
{/* ✅ GOOD: stable, unique key */}
{items.map(item => (
<p key={item}>{item}</p>
))}
</>
);
};- How does useState differ from useReducer, and when would you choose one over the other? ( useState এবং useReducer-এর মধ্যে পার্থক্য কী, এবং আপনি কখন একটির পরিবর্তে অন্যটি বেছে নেবেন? )
Answer: useState is ideal for simple, independent state values, while useReducer is better for complex state logic involving multiple sub-values or when the next state depends on the previous one. ( useState সাধারণ এবং স্বতন্ত্র স্টেট ভ্যালুর জন্য আদর্শ, অন্যদিকে useReducer জটিল স্টেট লজিক যেখানে একাধিক সাব-ভ্যালু থাকে অথবা যখন পরবর্তী স্টেট আগেরটির ওপর নির্ভর করে, এমন ক্ষেত্রে বেশি উপযোগী। )
import { useState, useReducer } from "react";
export const StateVsReducer = () => {
// ✅ useState: simple state
const [count, setCount] = useState(0);
// ✅ useReducer: complex state
const reducer = (state, action) => {
switch (action.type) {
case "inc":
return { count: state.count + 1 };
case "reset":
return { count: 0 };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<>
<h4>useState</h4>
<button onClick={() => setCount(c => c + 1)}>{count}</button>
<h4>useReducer</h4>
<button onClick={() => dispatch({ type: "inc" })}>
{state.count}
</button>
<button onClick={() => dispatch({ type: "reset" })}>
Reset
</button>
</>
);
};- What problems can occur if you update state directly instead of using a state setter? (স্টেট সেটার ব্যবহার না করে সরাসরি স্টেট আপডেট করলে কী কী সমস্যা হতে পারে?)
Answer: Updating state directly prevents React from detecting the change, meaning the component will not re-render and the UI will stay out of sync with the data. ( সরাসরি স্টেট আপডেট করলে React সেই পরিবর্তনটি শনাক্ত করতে পারে না, যার ফলে কম্পোনেন্টটি রি-রেন্ডার হয় না এবং ইউজার ইন্টারফেস (UI) তথ্যের সাথে সামঞ্জস্যপূর্ণ থাকে না। )
import { useState } from "react";
export const CounterExample = () => {
const [count, setCount] = useState(0);
// ❌ BAD (do not do this)
// const increment = () => {
// count = count + 1;
// };
// ✅ GOOD
const increment = () => setCount(prev => prev + 1);
return (
<>
<p>{count}</p>
<button onClick={increment}>Increment</button>
</>
);
};- What is the purpose of useMemo, and when should you avoid using it? (useMemo-এর উদ্দেশ্য কী, এবং এটি কখন ব্যবহার করা এড়িয়ে চলা উচিত?)
Answer: The purpose of useMemo is to cache the result of an expensive calculation between re-renders to improve performance, but you should avoid using it for simple operations because the overhead of memoization can actually make your app slower. (useMemo-এর উদ্দেশ্য হলো পারফরম্যান্স উন্নত করার জন্য রি-রেন্ডারের মধ্যবর্তী সময়ে একটি জটিল গণনার ফলাফল ক্যাশ করে রাখা, তবে সাধারণ ক্যালকুলেশনের ক্ষেত্রে এটি এড়িয়ে চলা উচিত কারণ মেমোরি ম্যানেজমেন্টের বাড়তি চাপের ফলে অ্যাপ উল্টো ধীরগতির হয়ে যেতে পারে।)
import { useState, useMemo } from "react";
// Simulate an expensive function
const slowFunction = (num: number) => {
console.log("Running slow calculation...");
let total = 0;
for (let i = 0; i < 5_000_000; i++) {
total += i % num;
}
return total;
};
// Simulate a "light but slightly bigger" calculation
const lightFunction = (num: number) => {
console.log("Running light calculation...");
return Array.from({ length: num * 1000 }, (_, i) => i).reduce((a, b) => a + b, 0);
};
export const UseMemoBetterExample = () => {
const [count, setCount] = useState(1);
const [text, setText] = useState("");
// ✅ Memoize only the truly expensive calculation
const expensiveResult = useMemo(() => slowFunction(count), [count]);
// ❌ Light calculation doesn't need useMemo
const lightResult = lightFunction(count);
return (
<div>
<h4>Expensive Calculation (memoized): {expensiveResult}</h4>
<h4>Light Calculation (no memo needed): {lightResult}</h4>
<button onClick={() => setCount(c => c + 1)}>Increment Count</button>
<div style={{ marginTop: 20 }}>
<input
value={text}
onChange={e => setText(e.target.value)}
placeholder="Type here"
/>
<p>You typed: {text}</p>
</div>
</div>
);
};- How does useCallback help with performance optimization? (useCallback কীভাবে পারফরম্যান্স অপ্টিমাইজেশনে সাহায্য করে?)
Answer: useCallback caches a function definition between re-renders, preventing child components wrapped in React.memo from unnecessary re-renders when the function is passed as a prop. (useCallback রি-রেন্ডারের মধ্যবর্তী সময়ে একটি ফাংশনের ডেফিনিশন ক্যাশ করে রাখে, যার ফলে যখন কোনো ফাংশন প্রপ হিসেবে পাঠানো হয়, তখন React.memo দিয়ে মোড়ানো চাইল্ড কম্পোনেন্টগুলোর অপ্রয়োজনীয় রি-রেন্ডার রোধ করা সম্ভব হয়।)
import { useState, useCallback } from "react";
// Child component wrapped in React.memo
const Child = React.memo(({ onClick }: { onClick: () => void }) => {
console.log("Child rendered"); // Will only log when Child actually re-renders
return <button onClick={onClick}>Child Button</button>;
});
export const UseCallbackExample = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("");
// ✅ With useCallback: caches the function between renders
// Rule of thumb: useCallback is useful when passing functions to React.memo children
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);
// ❌ Without useCallback (commented out)
// const handleClick = () => setCount(prev => prev + 1);
// Rule of thumb: avoid recreating functions unnecessarily if they are passed to memoized children
return (
<div>
<p>Count: {count}</p>
{/* Child will NOT re-render on typing input because handleClick is memoized */}
<Child onClick={handleClick} />
<input
value={text}
onChange={e => setText(e.target.value)}
placeholder="Type here"
/>
</div>
);
};- What is prop drilling, and how does Context API help solve it? (Prop drilling কী, এবং Context API কীভাবে এটি সমাধানে সাহায্য করে?)
Answer: Prop drilling is the process of passing data through multiple layers of components that don't need it just to reach a deep child, while Context API solves this by allowing components to share data globally without manual passing at every level. (Prop drilling হলো একটি প্রক্রিয়া যেখানে ডেটাকে এমন অনেকগুলো কম্পোনেন্টের মধ্য দিয়ে পাঠানো হয় যাদের ওই ডেটার প্রয়োজন নেই শুধু একটি গভীর চাইল্ড কম্পোনেন্টের কাছে পৌঁছানোর জন্য, অন্যদিকে Context API প্রতিটি লেভেলে ম্যানুয়ালি ডেটা না পাঠিয়ে সরাসরি গ্লোবালভাবে শেয়ার করার মাধ্যমে এই সমস্যার সমাধান করে।)
import { createContext, useContext } from "react";
// Create a context
const ThemeContext = createContext("light");
// ✅ Deep child can access context directly
const DeepChild = () => {
const theme = useContext(ThemeContext);
return <p>Theme from context: {theme}</p>;
};
// Prop drilling example (not using context)
const Intermediate = ({ theme }: { theme: string }) => <DeepChild />;
const Parent = ({ theme }: { theme: string }) => <Intermediate theme={theme} />;
export const PropDrillingExample = () => {
const theme = "dark";
return (
<div>
<h4>Prop Drilling Example</h4>
{/* Here, theme would need to pass through Parent -> Intermediate -> DeepChild */}
<Parent theme={theme} />
<h4>Context API Example</h4>
{/* Context allows DeepChild to access theme directly */}
<ThemeContext.Provider value={theme}>
<DeepChild />
</ThemeContext.Provider>
</div>
);
};- What are controlled components, and why are they commonly used in forms? (Controlled components কী, এবং কেন এগুলো সাধারণত ফর্মে ব্যবহৃত হয়?)
Answer: Controlled components are form elements whose value is driven by React state rather than the DOM, providing a "single source of truth" that allows for real-time validation, instant feedback, and easier data management. (Controlled components হলো এমন ফর্ম এলিমেন্ট যেগুলোর ভ্যালু DOM-এর পরিবর্তে React স্টেট দ্বারা নিয়ন্ত্রিত হয়; এটি তথ্যের একটি "একক উৎস" (single source of truth) নিশ্চিত করে যা রিয়েল-টাইম ভ্যালিডেশন, তাৎক্ষণিক ফিডব্যাক এবং সহজে তথ্য ব্যবস্থাপনায় সাহায্য করে।)
import { useState } from "react";
export const ControlledForm = () => {
const [name, setName] = useState("");
// Handle input change
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value); // React state is the single source of truth
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
alert(`Submitted name: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:{" "}
<input
type="text"
value={name} // Controlled by React state
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
<p>Current value: {name}</p> {/* Instant feedback */}
</form>
);
};