React Interview Questions and answers

-

React + JavaScript Technical Interview Questions and Answers

1. What is Callback Hell?

Callback Hell is a pattern of deeply nested callbacks that make asynchronous code hard to read and maintain.
Solutions: Promises, async/await, and modularizing logic.

2. What is React Fiber?

React Fiber is the internal engine that enables React to handle rendering more efficiently with incremental rendering, prioritization, and pausing/resuming work.

3. What is the render() function?

In class components, render() returns JSX that describes what the UI should look like. It’s a pure function based on props and state.

4. What are Higher-Order Components (HOCs)?

Functions that take a component and return a new one, used to add reusable logic (e.g., logging, data fetching).
Example: withAuth(Component).

5. What is a React Portal?

A way to render children into a DOM node outside the main component hierarchy (e.g., modals).
Use: ReactDOM.createPortal(child, container).

6. What is memo in React?

React.memo prevents re-renders if props haven’t changed, used for optimizing functional components.

7. Why are Fragments used in React?

They let you group multiple elements without adding extra DOM nodes.
Example: <> <Child1 /> <Child2 /> </>

8. Class-Based vs Functional Components

Functional components are cleaner, use hooks (useState, useEffect), and don’t require this.
Class components use lifecycle methods and can be more verbose.

9. What is Prop Drilling?

Passing data through many nested components unnecessarily.
Solutions: Context API, Redux, Zustand, etc.

Re-renders & Component Optimization

10. What causes unnecessary re-renders in React?

  • Changing props or state unnecessarily

  • Inline functions or objects

  • Parent component re-rendering

11. How does React.memo work, and when should you avoid it?

It shallowly compares props to avoid re-renders.
Avoid when: Props change frequently or comparison is more expensive than re-rendering.

12. Why are inline functions in props risky for performance?

They create a new function on each render, causing child components to re-render unless memoized.

13. How does React decide whether to re-render a component?

It compares new props/state with previous ones (shallow compare), and re-renders if any value changes.

14. What are the risks of deeply nested props or prop drilling?

  • Hard to manage

  • Prone to bugs

  • Causes unnecessary re-renders

Hooks & Memoization

15. How does useMemo improve performance?

Memoizes expensive computations so they’re only recalculated when dependencies change.

16. When is useMemo unnecessary or harmful?

When the computation is cheap—it adds overhead instead of optimizing.

17. What does useCallback actually do?

Memoizes functions between renders to avoid redefining them unless dependencies change.

18. What's the difference between useRef and useMemo?

  • useRef: persists values across renders without triggering re-renders.

  • useMemo: caches computed values for performance.

19. How can useEffect contribute to performance issues?

  • Running on every render if dependencies aren’t set correctly

  • Causing memory leaks if not cleaned up

Bundling & Lazy Loading

20. How do you split a large React bundle?

  • Dynamic imports

  • Code-splitting with React.lazy

  • Webpack's SplitChunksPlugin

21. What is React.lazy() and how do you use it?

Used for code-splitting; allows components to load lazily.

const LazyComp = React.lazy(() => import('./LazyComp'));

22. How does Suspense help performance?

It lets you show fallback UIs while waiting for lazy-loaded components or async data.

23. What is tree-shaking?

Eliminating dead/unreachable code during the bundling process to reduce file size.

24. How would you load only critical code above the fold?

  • Use dynamic import for below-the-fold components

  • Combine with lazy loading and Suspense

Lists, Virtualization, and DOM Performance

25. How would you optimize a list of 10,000 items?

Use virtualization with tools like react-window or react-virtualized to render only visible items.

26. What are tools like react-window used for?

They render only visible rows in long lists, improving performance and reducing DOM nodes.

27. Why is key prop important in .map() rendering?

It helps React identify and manage elements more efficiently during re-renders.

28. What is windowing in React?

Rendering a subset of items in a list based on the scroll position to boost performance.

29. How do you manage dynamic heights in virtualized lists?

  • Use VariableSizeList from react-window

  • Measure DOM elements or use CellMeasurer in react-virtualized

Profiling & Debugging

30. How do you use React DevTools Profiler?

It shows component render times, re-renders, and helps locate bottlenecks in performance.

31. What kind of insights can you get from Flamegraphs?

They visualize which components rendered and how long each took, helping pinpoint inefficient renders.

32. How do you identify which components are re-rendering too often?

  • Use React Profiler

  • Add console logs

  • Use why-did-you-render

33. Have you used why-did-you-render?

Yes, it’s a development tool that highlights unnecessary re-renders of React components.

34. How would you debug slow first paint or layout shift?

  • Use Chrome DevTools (Lighthouse, Performance tab)

  • Audit third-party libraries

  • Optimize font, image, and layout loading

React Internals & Advanced Behavior

35. What changed in React 18 with concurrent rendering?

Introduced concurrent features, like interruptible rendering, automatic batching, and startTransition.

36. How does automatic batching work?

Multiple state updates inside event handlers, timeouts, or promises are batched together into one render.

37. What is the difference between useDeferredValue and useTransition?

  • useDeferredValue: defers re-rendering of non-urgent values

  • useTransition: marks a part of the UI as non-urgent and delays it

38. How do useOptimistic and useActionState in React 19 improve UX?

They allow optimistic UI updates and error handling in forms or async actions, improving perceived responsiveness.

39. What's a real use case where react-scan helped you optimize?

Used react-scan to analyze render paths and identify components re-rendering due to deep prop chains, optimizing them with memo and useCallback.


Comments

Post a Comment

Popular posts from this blog

API development using .NET Core - ProductManagmentCRUD

-
Image
 1) Create Database and Table as mentioned below queries create table products(ProdId int Primary key, ProductName varchar(20), Price int ) insert into products (ProdId, ProductName, Price ) values (1,'Laptop','45000'); insert into products (ProdId, ProductName, Price ) values (2,'Mouse','500'); insert into products (ProdId, ProductName, Price ) values (3,'Router','1800'); select * from products; 2) Create ASP.NET Core API Project Install NuGet Packages  3)  AppSettings.json {   "Logging": {     "LogLevel": {       "Default": "Information",       "Microsoft.AspNetCore": "Warning"     }   },   "ConnectionStrings": {     "DbConnection": "Server=Server_name; Database=ProductManagementCrud; User Id=sa; password=oj#$kdfn; TrustServerCertificate=True;"   },   "AllowedHosts": "*" } 4) Model -  Product.cs namespace ProductManagmentCRUD.Mo...
Read more

Singleton Design Pattern Realtime Example of banking

-
Image
Logger Utility in a Banking System using Singleton In a banking application, you might have a logger that logs important events like transactions, errors, and user activities. You want to ensure that only one instance of the logger exists throughout the application to maintain a consistent log format and avoid file access conflicts. 1) Why Singleton? A logging class doesn't need multiple instances. One instance is sufficient and more efficient. 2) Consistency: All log messages are centralized through one instance. 4) Resource Management: Avoids file access conflicts and redundant memory usage. using System; public sealed class Logger {     private static Logger instance;     // Private constructor to prevent instantiation from outside     private Logger()    {         Console.WriteLine(" Logger Initialized. ");     }     // Public method to get the single instance     public static Logger ...
Read more

Consume API in MVC Application

-
Image
 To map the response from API ( https://localhost:7264/api/Product ) to a .NET MVC Web App , you need to call the API from your controller and deserialize the response into a model, which you can then pass to a view. 1: Create the Product Model 2: Call API from MVC Controller 3: Register HttpClient in Program.cs (or Startup.cs ) 4: Create the Razor View ( Views/Product/Index.cshtml ) 5: Route to Controller Step 1: Create the Product Model public class Product {     public int Id { get; set; }     public string Name { get; set; }     public decimal Price { get; set; } } Step 2: Call API from MVC Controller using Microsoft.AspNetCore.Mvc; using ProductManagementMVC.Models; using System.Net.Http.Headers; using System.Text.Json; namespace ProductManagementMVC.Controllers {     public class ProductController : Controller     {         private readonly HttpClient _httpClient;         public Pro...
Read more