MERN Stack Interview Questions & Answers (Complete)
1. What is MERN Stack?
MERN Stack is a JavaScript-based tech stack used for building fullstack web applications. It
includes:
- MongoDB (Database)
- Express.js (Backend framework)
- React.js (Frontend library)
- Node.js (Runtime environment)
2. Explain the role of each component in MERN.
- MongoDB: NoSQL database to store data in JSON-like documents.
- Express.js: Web framework for Node.js to handle HTTP requests.
- React.js: Library to build user interfaces.
- Node.js: JavaScript runtime to run code on the server.
3. What is JSX in React?
JSX stands for JavaScript XML. It allows writing HTML-like syntax in React components, which is
later transpiled to JavaScript.
4. What are components in React?
Components are reusable building blocks in React. They can be functional or class-based.
5. Difference between Functional and Class Components?
- Functional: Use functions and React hooks.
- Class: Use ES6 classes and lifecycle methods.
6. What is useState and useEffect?
- useState: Hook for managing state in functional components.
- useEffect: Hook for performing side effects like API calls.
7. What is props in React? How is it different from state?
- Props: Read-only data passed from parent to child.
- State: Local, mutable data managed inside a component.
8. What is Express.js and why is it used?
Express.js is a minimal and flexible Node.js web application framework for building RESTful APIs
and web applications.
9. How to define a simple route in Express.js?
Example:
app.get('/', (req, res) => {
res.send('Hello World');
});
10. What is Node.js? How is it different from JavaScript in the browser?
Node.js is a runtime for executing JavaScript on the server. Browser JS runs in client-side
environment with DOM access.
11. How to connect MongoDB using Mongoose?
mongoose.connect('mongodb://localhost:27017/dbname', { useNewUrlParser: true,
useUnifiedTopology: true });
12. What is a schema in MongoDB/Mongoose?
Schema defines the structure of documents in a MongoDB collection using Mongoose.
13. Explain the flow of data in a MERN application.
React (frontend) sends HTTP request Express.js/Node.js (backend) processes MongoDB
stores/fetches data Response returned to React.
14. What is package.json and why is it important?
It holds metadata about the project and dependencies used in the Node.js application.
15. What is `npm install` vs `npm install --save`?
`npm install`: Installs package.
`npm install --save`: Adds package to dependencies in package.json (default in newer npm
versions).
16. How do you create a REST API using Express.js?
You define routes using methods like app.get(), app.post(), etc., and handle requests using callback
functions.
17. What is CORS and how do you enable it in Express?
CORS (Cross-Origin Resource Sharing) is a security feature. Use the cors middleware:
`app.use(cors());`
18. What is middleware in Express?
Functions that execute during the lifecycle of a request to the server. Can modify request/response
or end the request.
19. Explain MVC pattern in Node/Express.
MVC stands for Model-View-Controller: Model manages data, View displays UI, Controller handles
logic.
20. What is MongoDB Atlas?
A cloud-based database service for MongoDB, offering high availability, scalability, and security.
21. How to structure a MERN project?
Common structure includes: /client (React), /server (Express), /models, /routes, /controllers, /config.
22. How do you manage routes in React? (React Router)
Use `react-router-dom` with components like <BrowserRouter>, <Route>, <Link>, etc.
23. How do you fetch data in React?
Use fetch API or axios inside useEffect hook to call backend APIs.
24. What is lifting state up in React?
Moving state to a common ancestor component to share data between child components.
25. What are controlled vs uncontrolled components?
Controlled components are tied to state via props. Uncontrolled components access DOM values via
refs.
26. How to handle error globally in Express.js?
Use error-handling middleware with 4 params: `app.use((err, req, res, next) => {...});`
27. How to create a custom React hook?
A custom hook is a JavaScript function using built-in hooks like useState/useEffect to reuse logic.
28. Explain Redux Thunk vs Redux Saga.
Both handle async actions. Thunk uses functions, Saga uses generator functions for more complex
flows.
29. What is memoization in React?
Optimizing performance by caching results: React.memo, useMemo, useCallback.
30. Explain the difference between useEffect and useLayoutEffect.
useLayoutEffect fires synchronously after DOM changes, useEffect is async after paint.
31. How to protect routes in React?
Use a PrivateRoute component that checks auth state before rendering.
32. Explain lazy loading and code splitting in React.
Dynamically load components with React.lazy and Suspense to improve performance.
33. How do you design a scalable backend with Node.js?
Use modular code, clustering, load balancers, optimized queries, and error handling.
34. What is the event loop in Node.js?
It's the mechanism that handles async operations using a single-threaded loop and callback queue.
35. How to optimize performance in a MERN application?
Use lazy loading, memoization, indexing, efficient queries, pagination, and minimize re-renders.
