MERN Stack Interview Q&A
React.js Questions
What is React.js?
- JavaScript library for UI development
- Component-based architecture
- Virtual DOM for efficient rendering
- Developed by Facebook
- Used for single-page applications
Explain React Components
- Reusable UI building blocks
- Two types:
1. Functional Components
2. Class Components
- Returns JSX
- Can have state and props
Example:
```jsx
// Functional Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
```
What are Props in React?
- Read-only data passed to components
- Immutable
- Uni-directional flow
- Used for communication between components
Explain State in React
- Component's internal data
- Mutable
- Managed using useState hook in functional components
- Triggers re-rendering when changed
Example:
```jsx
const [count, setCount] = useState(0);
```
What is Virtual DOM?
- Lightweight JavaScript representation of actual DOM
- Improves performance
- Efficiently updates UI
- Minimizes direct manipulation of DOM
Explain React Hooks
Key Hooks:
- useState: State management
- useEffect: Side effects
- useContext: Context API
- useReducer: Complex state logic
- useMemo: Memoization
What is JSX?
- JavaScript XML
- Allows HTML in JavaScript
- Transformed to JavaScript
- Enables declarative UI creation
Difference: Controlled vs Uncontrolled Components
Controlled:
- Form data handled by React state
- More predictable
Uncontrolled:
- Form data handled by DOM
- Less control
What is Redux?
- State management library
- Centralized store
- Predictable state changes
- Used for complex applications
React Lifecycle Methods
Functional Components:
- useEffect replaces lifecycle methods
- componentDidMount → useEffect((),[])
- componentDidUpdate → useEffect((),[dependency])
- componentWillUnmount → useEffect cleanup function
Node.js Questions
What is Node.js?
- JavaScript runtime
- Server-side JavaScript
- Event-driven
- Non-blocking I/O
- Built on Chrome's V8 engine
Explain Event Loop in Node.js
- Handles asynchronous operations
- Single-threaded
- Non-blocking architecture
- Uses callback queue and call stack
What are Promises in Node.js?
- Handle asynchronous operations
- Alternative to callbacks
- Three states: Pending, Fulfilled, Rejected
Example:
```javascript
const promise = new Promise((resolve, reject) => {
// Async operation
});
```
Explain Middleware in Node.js
- Functions that have access to request/response
- Can modify request/response
- Used in Express.js
- Performs pre-processing tasks
What is NPM?
- Node Package Manager
- Manages dependencies
- Installs libraries
- Manages project scripts
Express.js Questions
What is Express.js?
- Web application framework for Node.js
- Minimal and flexible
- Provides routing
- Middleware support
How to Create Routes in Express?
```javascript
app.get('/users', (req, res) => {
res.send('User List');
});
```
Explain Routing in Express
- Defines application endpoints
- HTTP methods: GET, POST, PUT, DELETE
- Handles request/response
MongoDB Questions
What is MongoDB?
- NoSQL database
- Document-oriented
- Stores data in BSON format
- Flexible schema
- Scalable
MongoDB vs SQL Databases
MongoDB:
- No predefined schema
- Horizontal scaling
- Document-based
SQL:
- Predefined schema
- Vertical scaling
- Table-based
REST API Questions
What is REST API?
- Representational State Transfer
- Architectural style for web services
- Uses HTTP methods
- Stateless communication
HTTP Methods in REST
- GET: Retrieve
- POST: Create
- PUT: Update
- DELETE: Remove
- PATCH: Partial update
What is JSON?
- JavaScript Object Notation
- Lightweight data exchange format
- Language independent
- Easy to read/write
Example:
```json
{
"name": "John",
"age": 30
}
```
Authentication in REST APIs
Methods:
- JWT (JSON Web Tokens)
- OAuth
- Basic Authentication
- API Keys
MERN Stack Integration Questions
MERN Stack Architecture
- MongoDB: Database
- Express.js: Backend framework
- React.js: Frontend library
- Node.js: Runtime environment
How to Connect MongoDB with Node.js?
```javascript
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/database');
```
State Management in MERN
- Redux for global state
- Context API
- React Hooks
Handling API Calls
- Axios library
- Fetch API
- async/await
Example:
```javascript
const fetchData = async () => {
const response = await axios.get('/api/data');
};
```
Error Handling in MERN
- Try/Catch blocks
- Middleware
- Global error handlers
- Centralized error management
Performance Optimization
- Code splitting
- Lazy loading
- Memoization
- Efficient state management
- Minimizing re-renders
