Are you preparing for a frontend interview or a MERN stack role? This blog covers the most frequently asked JavaScript and ReactJS interview questions — from tricky concepts like closures and promises to React hooks, state management, and performance optimizations. Whether you’re a fresher or experienced developer, these Q&As will help you feel confident and interview-ready!
JAVASCRIPT INTERVIEW QUESTIONS AND ANSWERS
1. Difference between JavaScript and other programming languages
JavaScript is dynamically typed, runs in browsers, and is mainly used for web development. Other languages like Java or C++ are compiled and used for different domains like system-level or mobile development.
2. Explain execution context in JavaScript, event loop works
Execution context is the environment in which code is executed. The event loop manages the execution of asynchronous callbacks using the call stack and task queue.
3. Difference between let, const and var
var: function-scoped, can be redeclared.let: block-scoped, cannot be redeclared.const: block-scoped, cannot be reassigned.
4. What are primitive and non-primitive data types?
Primitive: string, number, boolean, null, undefined, symbol, bigint.
Non-primitive: object, array, function.
5. What is the Nullish coalescing operator?
The ?? operator returns the right-hand value only if the left-hand value is null or undefined.
6. What is the arrow function and how is it different from normal function?
Arrow functions do not have their own this, arguments, or super, and cannot be used as constructors. They’re also shorter in syntax.
7. What is IIFE?
IIFE (Immediately Invoked Function Expression) is a function that runs immediately after it’s defined.
8. What is closures concept in JavaScript, explain with examples
A closure is a function that has access to its own scope, the outer function’s scope, and the global scope.
9. What is this keyword?this refers to the object that is executing the current function. In strict mode, it can be undefined in functions.
10. What is prototype and prototype inheritance?
Every object in JS has a prototype. Inheritance allows an object to inherit properties and methods from another object using its prototype chain.
11. Difference between map, filter and find method
map(): returns new array with modified elements.filter(): returns array with elements that match a condition.find(): returns the first element that matches a condition.
12. What is the difference between forEach and map method
forEach(): executes a function for each item, returns undefined.map(): executes and returns a new array.
13. What is the callback function? List down the use cases
A callback is a function passed to another function to be called later.
Use cases: event listeners, setTimeout, array methods, async operations.
14. What is callback hell? How to avoid it
Callback hell is deeply nested callbacks that make code hard to read. Avoid using Promises or async/await.
15. What is a promise, explain with an example
A Promise represents an asynchronous operation.
16. What are promise methods?then(), catch(), finally()Promise.all(), Promise.race(), Promise.any(), Promise.allSettled()
17. What is the difference between Promise.race and Promise.any method
race: resolves/rejects when the first promise settles.any: resolves when the first promise fulfills (ignores rejections).
18. What is event bubbling and event capturing?
Bubbling: event flows from target to root.
Capturing: event flows from root to target.
19. What is the event delegation concept in JavaScript?
Attaching a single event handler to a parent element to handle events from its children using bubbling.
20. Difference between localStorage, sessionStorage and cookies
localStorage: persists even after tab is closed.sessionStorage: cleared when tab is closed.cookies: stored with each request, small in size.
21. What is the immutability concept in JavaScript?
Immutability means data should not be changed after creation. You can create new copies instead of changing existing ones.
22. Explain the difference between Map and Set
Map: key-value pairs.
Set: stores unique values.
23. What is the code splitting concept in JavaScript
Breaking the code into smaller bundles that load on demand to improve performance.
24. Explain memoization concepts in JavaScript with examples
Memoization caches the output of function calls to avoid recalculating results.
25. What is the strict mode in JavaScript?"use strict" enforces stricter rules in JS, prevents usage of undeclared variables.
26. Difference between call(), bind() and apply() method with example
call(): calls function with args:fn.call(obj, arg1)apply(): calls with array of args:fn.apply(obj, [arg1])bind(): returns new function:const f = fn.bind(obj)
27. What is the currying concept in JavaScript?
Currying transforms a function with multiple arguments into nested single-argument functions.
28. Difference between shallow and deep copy in object
Shallow copy: copies references.
Deep copy: recursively copies all levels.
29. Explain Promise chaining concept with example
You can chain .then() to run promises in sequence.
30. Explain Object.freeze and Object.seal method
freeze(): prevents all changes.seal(): prevents adding/removing but allows updating.
31. Explain design pattern in JavaScript
Reusable code solutions — e.g., Singleton, Factory, Module, Observer.
32. Explain the concept debouncing and throttling
Debounce: delay execution until a pause in activity.
Throttle: run function at most once every X ms.
REACT INTERVIEW QUESTIONS AND ANSWERS
1. What is ReactJS and how is it different from other libraries/frameworks?
React is a JavaScript library for building UIs. It’s component-based, declarative, and uses a virtual DOM for better performance compared to traditional frameworks.
2. What is JSX? What is the difference between JSX and TSX in ReactJS?
JSX is a syntax extension that allows writing HTML-like code in JavaScript. TSX is the same, but supports TypeScript.
3. Explain the concept of virtual DOM, Shadow DOM in ReactJS.
Virtual DOM is a lightweight JS object that mirrors the real DOM. React uses it for efficient updates. Shadow DOM encapsulates styles/markup for web components.
4. How is virtual DOM different from real DOM?
Virtual DOM updates only the changed parts, making it faster. Real DOM updates the entire tree, which is slower.
5. What are the different types of components in ReactJS?
Class components and functional components.
6. Difference between class and functional component.
Class components use lifecycle methods and this. Functional components use hooks and are cleaner/simpler.
7. What is the state of ReactJS?
State is internal component data that determines what gets rendered. It changes over time.
8. What are props and the difference between props and states.
Props are inputs from parent components; they are read-only. State is local and can change over time.
9. What is props drilling and alternative to it?
Props drilling is passing props through multiple levels. Alternatives: Context API or Redux.
10. Difference between controlled and uncontrolled components.
Controlled components have form data handled by React. Uncontrolled components use DOM directly.
11. How re-render happens when states change in ReactJS?
When state changes, React re-renders the component with updated values.
12. What happens if you try to update the state directly in ReactJS?
React won’t detect changes. Use setState or useState to ensure updates trigger re-renders.
13. How to share data among sibling components?
Lift the state up to the parent or use Context API.
14. What is a styled component? Have you implemented theming in ReactJS?
Styled-components let you write CSS in JS. Theming is done using ThemeProvider and global theme objects.
15. What is the React server component?
A React feature that allows components to be rendered on the server and streamed to the client.
16. Explain lifecycle methods of components.
Mounting: componentDidMount
Updating: componentDidUpdate
Unmounting: componentWillUnmount
17. How do functional components handle the lifecycle method of class components?
Using useEffect, useLayoutEffect, etc., instead of lifecycle methods.
18. How to handle side effects in class and functional components?
In class: lifecycle methods like componentDidMount.
In functional: useEffect.
19. What are react hooks? List out hooks you have used till date?
Hooks are functions like useState, useEffect, useRef, useContext, useMemo, useCallback, useReducer.
20. Difference between useState and useRef hooks in form handling.
useState tracks input values and causes re-render. useRef accesses DOM elements without re-render.
21. What are the differences between useState, useContext and useReducer?
useState: simple local state
useContext: share data globally
useReducer: complex state logic, similar to Redux
22. What are the rules of hooks in React?
Hooks must be called at the top level of a functional component, not inside loops, conditions, or nested functions.
23. What are custom hooks? Have you used it in a project, provide an example?
Custom hooks are reusable hook logic. Example:
24. What is a Higher order Component? Explain with examples.
A function that takes a component and returns a new one with added props or behavior:
25. What is the React reconciliation process?
React compares old and new virtual DOM and updates only the changed parts in the real DOM.
26. How do React compares virtual DOM with real DOM?
By diffing the new virtual DOM with the old one, React finds differences and updates the real DOM efficiently.
27. What are context API hooks? Explain with an example?
useContext lets components access global values.
28. What is the difference between useCallback and useMemo hooks.
useCallback: memoizes a function
useMemo: memoizes the return value of a function
29. Difference between context API and redux.
Context is simpler and good for small apps. Redux is more powerful and suited for large applications.
30. What is the redux toolkit? How does it simplify redux?
Redux Toolkit simplifies Redux with less boilerplate and built-in best practices.
31. What are middleware in redux?
Functions that run between dispatch and reducer, e.g., redux-thunk, redux-saga.
32. How would you implement a global state without redux?
Using Context API + useReducer or third-party libs like Zustand.
33. What is a synthetic event in react?
A wrapper around browser’s native event for cross-browser compatibility.
34. What is the difference between a synthetic event and a real DOM event?
Synthetic events normalize behavior across browsers. Real DOM events are browser native.
35. How to pass arguments to the event handler in react?
Use arrow functions:
36. How do you handle dynamic routing in react?
Using react-router-dom:
37. How do you manage form validation in react? Explain with examples.
Use libraries like Formik/Yup or custom handlers in onChange and onSubmit.
38. How would you implement lazy loading with routes?
With React.lazy and Suspense:
39. How do you optimize forms with hundreds of input fields in react?
Use useMemo, split into sub-components, and React.memo.
40. How would I implement a multi-step form with conditional rendering between steps?
Use state to track the current step and conditionally render forms.
41. What are the keys to react? Why are they important in lists?
Keys help React identify which elements changed, added, or removed.
42. What is react.memo and how does it work?
It prevents re-rendering if props haven’t changed by memoizing the component.
43. What is the react pure component? Explain with roles and use cases.
A component that implements shouldComponentUpdate with a shallow prop/state check.
44. What is the concept called virtualization in react?
Only renders visible items in a long list for better performance. Libraries: react-window, react-virtualized.
45. How do you optimize rendering of large lists in react?
Use virtualization, pagination, React.memo, and lazy loading.
46. How to avoid unnecessary re-rendering in react?
Use React.memo, useMemo, useCallback, and avoid changing props unnecessarily.
47. What is the purpose of error boundaries in react?
To catch and handle errors in rendering without crashing the entire app.
48. How do you handle errors in asynchronous operations in react?
Use try…catch with async/await or .catch() with Promises.
49. How do you fetch data in react? Explain with examples
Use useEffect and fetch/axios:
50. What is Axios and how is it different from fetch API?
Axios has easier syntax, auto JSON conversion, and supports interceptors.
51. How do you securely store API keys in react?
Use .env files with REACT_APP_ prefix. Never store secrets in frontend.
52. How would you implement retries logic for failed API requests in react?
Use retry logic manually or with axios-retry or similar libraries.
53. What are fragments in react? Why are they used?
To group multiple elements without adding extra nodes: <>…</>.
54. What is the significance of React.StrictMode?
It activates extra checks and warnings during development.
55. How do you identify and fix the memory leaks in react?
Clean up in useEffect return functions and remove unused refs/listeners.
56. How do you build react applications for production?
Use npm run build. It bundles and minifies your app.
57. What is the major difference between webpack and babel?
Webpack bundles modules. Babel transpiles new JS syntax to old-compatible versions.
58. How do you configure webpack for react projects?
Define entry/output, loaders for JS/CSS, and use plugins like HtmlWebpackPlugin.
59. How do you optimize a react application for performance?
Code splitting, lazy loading, memoization, avoiding unnecessary re-renders.
60. Explain the purpose of .env file in react?
To store environment-specific config like API keys. Must prefix with REACT_APP_.
Conclusion:
JavaScript and React are the core of modern web development. Mastering these concepts not only boosts your interview game but also improves your day-to-day coding confidence. Stay sharp with these curated questions and get ready to impress your next interviewer!
Join Our Telegram Group (1.9 Lakhs + members):- Click Here To Join
For Experience Job Updates Follow – FLM Pro Network – Instagram Page
For All types of Job Updates (B.Tech, Degree, Walk in, Internships, Govt Jobs & Core Jobs) Follow – Frontlinesmedia JobUpdates – Instagram Page
For Healthcare Domain Related Jobs Follow – Frontlines Healthcare – Instagram Page
For Major Job Updates & Other Info Follow – Frontlinesmedia – Instagram Page
