1. What's the difference between SSR and CSR in Next.js?

👉 SSR (Server-Side Rendering): The page is generated on the server before sending
it to the browser.
📌 Example: News websites like Times of India – every refresh fetches fresh data.

👉 CSR (Client-Side Rendering): The page loads first, and data is fetched later on
the client side.
📌 Example: User dashboards – data changes frequently, so CSR is better.

2.Explain the difference between App Router and Page Router in Next.js.
👉 Page Router (Old Next.js, before v13): Uses pages/ folder, everything is file-
based.
👉 App Router (Next.js 13+): Uses app/ folder, follows folder-based routing,
supports React Server Components.
📌 Example: Old Next.js is like a manual car, you control everything. New Next.js
(App Router) is like automatic transmission, optimized and easier to use.

3.How has Next.js changed from older versions to the latest versions?
👉 Before Next.js 13: Fully client-side heavy, page-based routing.
👉 After Next.js 13+: Server Components, parallel routes, optimized API calls.
📌 Example: Manual vs. Automatic car analogy – older Next.js needed more control,
while Next.js 15+ is optimized for performance.

4.What is a closure in JavaScript?

👉 Closure is when a function "remembers" variables from its parent scope even after
execution.
📌 Example:

An ATM machine remembers your PIN even after the transaction is done.

5.Explain the event loop in JavaScript.

👉 The event loop ensures JavaScript handles non-blocking operations like async
calls.
📌 Example:

When ordering food in a restaurant, you place an order (async task), and the waiter
(event loop) keeps checking if the food is ready without stopping.

6. How does setTimeout work in JavaScript?

👉 Delays execution of a function after a specified time.
📌 Example:

Reminder App: You set a reminder for 10 minutes, and it pops up after the delay.

7. What is the time complexity of searching in an array?

👉 Linear Search: O(n) – Checking all elements one by one.
👉 Binary Search: O(log n) – Dividing array in half each time.
📌 Example:

Linear Search: Finding a name in an unsorted phone book (O(n)).

Binary Search: Finding a name in an alphabetically sorted phone book (O(log n)).

8. Explain O(1), O(n), and O(log n) with examples.

👉 O(1) (Constant Time): Direct access, doesn't depend on input size.
📌 Example: Looking at today’s date on your phone.
👉 O(n) (Linear Time): Time increases with input size.
📌 Example: Finding a book in a messy library (search one by one).
👉 O(log n) (Logarithmic Time): Divide and conquer.
📌 Example: Binary Search in a dictionary.

9. Difference between Stack and Queue?

👉 Stack (LIFO - Last In, First Out):
📌 Example: Stack of plates – last placed plate is removed first.

👉 Queue (FIFO - First In, First Out):

📌 Example: People standing in line for movie tickets – first person in line is
served first.

10. What is a Linked List, and where is it used?

👉 A linked list is a sequence of elements where each element points to the next.
📌 Example: Train compartments connected by links.

11. What is Debouncing?

👉 Delays execution of a function until the user stops triggering it.
📌 Example: Google Search Suggestions – only shows results after you stop typing.

12. What is Memoization?

👉 Caching the result of a function to avoid recalculations.
📌 Example: Browser cache – loads websites faster after first visit.

13. How do you optimize API calls in React?

👉 Using useEffect, useMemo, useCallback to avoid unnecessary re-renders.
📌 Example: API call only when input stops changing.

14. Have you faced memory leaks in React?

👉 Yes, in useEffect when I didn’t clean up event listeners.

15. How does Next.js help in SEO?

👉 SSR + Metadata optimization (next/head).
📌 Example: E-commerce websites using Next.js rank better on Google.

16.What is a React Server Component (RSC)?

A React Server Component is a component that runs only on the server and never
ships JavaScript to the client.

✅ Improves performance by reducing client-side JS.

✅ Direct access to databases & APIs (No need for API routes).
✅ No client-side state or interactivity (Use Client Components for that).

📌 Think of it like:

Server Components = 📡 Chef preparing a dish in the kitchen (server).

Client Components = Waiter serving the dish to the table (client).

17.What is the Virtual DOM in React?

🔹 Answer: The Virtual DOM is a lightweight copy of the real DOM. React uses it to
compare changes and update only what’s necessary, improving performance.

💡 Example: Imagine editing a Google Doc—only the changes sync, not the entire
document.

18.What is reconciliation in React?

🔹 Answer: Reconciliation is React’s process of updating the Virtual DOM and
applying changes efficiently using the Diffing Algorithm.
💡 Example: It’s like Git diff—it finds differences between two code versions and
updates only the changed lines.

19. What is React Fiber?

🔹 Answer: React Fiber is the core engine of React for faster rendering and better
UI updates. It breaks rendering into small tasks and prioritizes them.

💡 Example: A video streaming app loads essential content first, then buffers in the
background.

20. What are keys in React lists?

🔹 Answer: Keys help React identify which items changed in a list, preventing
unnecessary re-renders.

💡 Example: In an e-commerce cart, if a user removes an item, React uses the key to
update only that item instead of reloading the entire cart.

21. Difference between useState and useReducer?

🔹 Answer: useState is for simple state updates, useReducer is for complex state
logic with multiple actions.

💡 Example: useState for a toggle button, useReducer for managing a shopping cart.

22. When to use useMemo and useCallback?

🔹 Answer:

useMemo: Memoizes computed values.

useCallback: Memoizes functions to prevent unnecessary re-creation.

💡 Example: Use useMemo for expensive calculations (e.g., filtering a large dataset)
and useCallback for event handlers in child components.

23. What is the difference between controlled and uncontrolled components?

🔹 Answer:

Controlled components: State is managed in React (useState).

Uncontrolled components: State is handled by the DOM (ref).

💡 Example: A search bar with live filtering is controlled, while a file input
(<input type="file" />) is uncontrolled.

24. What is Prop Drilling and how to avoid it?

🔹 Answer: Prop Drilling happens when props are passed multiple levels deep. Avoid
it using Context API or state management libraries (Redux, Recoil, Zustand).

💡 Example: Instead of passing a theme prop from App → Navbar → Button, use Context
API to provide it globally.

25.. What are React Fragments (<>...</>) used for?

🔹 Answer: Fragments let us group multiple elements without adding extra divs.

💡 Example: <Fragment> prevents unnecessary <div> wrappers that break CSS layouts.

26. What is lazy loading in React?

🔹 Answer: It loads components only when needed, reducing initial load time.

💡 Example: Use React.lazy() for loading a dashboard page only after login.

27. Difference between SSR and SSG in Next.js?

🔹 Answer:

SSR (Server-Side Rendering): Generates HTML on request.

SSG (Static Site Generation): Pre-generates pages at build time.

💡 Example: Blog posts use SSG (cached pages), while user dashboards use SSR (fresh
data)

28. What is ISR (Incremental Static Regeneration)?

🔹 Answer: ISR allows updating static pages without rebuilding the entire site.

💡 Example: E-commerce product pages update every 10 minutes without redeploying the
site.

29. How does Next.js handle API routes?

🔹 Answer: API routes (/pages/api/) act as backend endpoints inside a Next.js app.

💡 Example: /api/products fetches product data, replacing a separate Node.js

backend.

30. How to optimize images in Next.js?

🔹 Answer: Use <Image> from next/image, which provides lazy loading and automatic
resizing.

💡 Example: Amazon uses image optimization to load product images faster on mobile.

31. What is Middleware in Next.js?

🔹 Answer: Middleware runs before the request is processed, allowing redirects,
authentication checks, etc.

💡 Example: Blocking users from accessing admin pages without logging in.

32.. What is event delegation?

🔹 Answer: Instead of adding event listeners to multiple elements, attach one to a
parent.

💡 Example: Handling clicks on a dynamic list (ul) instead of each li.

33. Difference between == and ===?

🔹 Answer:

== checks value only ("5" == 5 → true).

=== checks value & type ("5" === 5 → false).

34. What is a closure?

🔹 Answer: A function that remembers variables from its outer scope even after
execution.
💡 Example: A function returning another function for caching API calls.

35. What is the difference between map, filter, and forEach?

🔹 Answer:

map(): Returns a new array.

filter(): Returns matching elements.

forEach(): Iterates but doesn’t return.

💡 Example: map() for transforming data, filter() for search results.

36. What is debouncing and throttling?

🔹 Answer:

Debouncing: Delays execution until user stops typing.

Throttling: Limits execution to once per interval.

💡 Example: Search bar uses debounce, window resize uses throttle.

37. What is hydration in Next.js?

🔹 Answer: Hydration is React attaching event listeners to pre-rendered HTML.

💡 Example: Static pages with interactive elements (like a like button).

38. Difference between getServerSideProps and getStaticProps?

🔹 Answer:

getServerSideProps: Runs on every request (SSR).

getStaticProps: Runs at build time (SSG).

39. What is the purpose of useRef?

🔹 Answer: useRef stores values without causing re-renders.

💡 Example: Storing a previous input value without triggering a re-render.

40. Difference between context and redux?

🔹 Answer:

Context API is for lightweight state management.

Redux is for complex state with global updates.

41. What is code-splitting?

🔹 Answer: Breaking code into smaller chunks for better performance.

💡 Example: Loading charts only when needed in a dashboard.

42. What is hydration mismatch?

🔹 Answer: When client-side React output differs from pre-rendered HTML.
💡 Example: Showing a random quote on build but re-generating on the client

43. Difference between cookies, localStorage, and sessionStorage?

🔹 Answer:

Cookies: Sent to the server, persistent.

localStorage: Stored permanently, client-side.

sessionStorage: Cleared when the tab closes.

44. How does React handle errors?

🔹 Answer: Using Error Boundaries (componentDidCatch) for class components and try-
catch in hooks.

45. What is a Service Worker?

🔹 Answer: A script running in the background for caching and push notifications.

46. What is PWA (Progressive Web App)?

🔹 Answer: A web app that works offline, like a native app.

💡 Example: Twitter Lite uses PWA for offline access.