Node.js + React + React Components.png

🟢 Level 1: 6 Months – 1 Year (Fresher / Junior)

Node.js

Q1. What is Node.js and why is it used? Node.js is a JavaScript runtime built on Chrome’s V8 engine. It allows running JavaScript on the server side. It’s non-blocking and event-driven, making it ideal for I/O-heavy applications like APIs and real-time apps.

Q2. What is the difference between require and import? require is CommonJS (used by default in Node.js), while import is ES Module syntax. In newer Node.js versions (v12+), both are supported, but you need "type": "module" in package.json or .mjs extension for ES Modules.

Q3. What is package.json? What is the difference between dependencies and devDependencies? package.json holds project metadata and dependencies. dependencies are needed in production (e.g., Express), while devDependencies are only needed during development (e.g., nodemon, eslint).

Q4. What is middleware in Express.js? Middleware is a function that has access to req, res, and next. It runs between receiving a request and sending a response — used for logging, auth checks, parsing body, etc.

js

app.use((req, res, next) => {
  console.log('Request received');
  next(); // pass to next middleware
});

Q5. What is the event loop in Node.js? The event loop allows Node.js to perform non-blocking I/O by offloading operations to the OS and picking up callbacks when they complete. This is why Node.js can handle many requests without threads.

React

Q6. What is React and what problem does it solve? React is a UI library by Facebook for building component-based interfaces. It solves the problem of managing and updating the DOM efficiently using a Virtual DOM.

Q7. What is JSX? JSX is a syntax extension that lets you write HTML-like code inside JavaScript. Babel compiles it to React.createElement() calls.

jsx

const element = <h1>Hello World</h1>;
// Compiles to: React.createElement('h1', null, 'Hello World')

Q8. What is the difference between state and props?

  • props are read-only and passed from parent to child.
  • state is local and managed within the component. Changes to state trigger re-renders.

Q9. What is useState hook? useState is a hook that adds local state to a functional component.

jsx

const [count, setCount] = useState(0);

Q10. What is useEffect hook? useEffect runs side effects after render — API calls, subscriptions, DOM changes. The dependency array controls when it re-runs.

jsx

useEffect(() => {
  fetchData();
}, []); // Runs once on mount

React Components

Q11. What is the difference between functional and class components? Functional components are simpler JS functions that use hooks. Class components use this.state and lifecycle methods. React now recommends functional components.

Q12. What is a controlled vs uncontrolled component?

  • Controlled: form value is controlled by React state (value={state})
  • Uncontrolled: form value is managed by the DOM, accessed via ref

Q13. What is key prop and why is it important in lists? key helps React identify which items have changed in a list. Without proper keys, React may re-render unnecessarily or incorrectly.

jsx

items.map(item => <li key={item.id}>{item.name}</li>)

🟡 Level 2: 1–2 Years (Mid-Level)

Node.js

Q14. What is the difference between process.nextTick(), setImmediate(), and setTimeout()?

  • process.nextTick() — runs before any I/O, after current operation
  • setImmediate() — runs after I/O callbacks in the event loop
  • setTimeout() — runs after a minimum delay

Q15. How do you handle errors in Express.js globally? By defining an error-handling middleware with 4 parameters (err, req, res, next):

js

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ message: err.message });
});

Q16. What is the difference between async/await and Promises? Both handle async operations. async/await is syntactic sugar over Promises, making code more readable. Under the hood, they both use the same Promise mechanism.

Q17. How do you prevent callback hell in Node.js? Use Promises, async/await, or modularize callbacks into named functions. This improves readability and maintainability.

Q18. What is clustering in Node.js and why is it used? Node.js runs on a single thread. Clustering forks multiple processes (workers) using the cluster module to take advantage of multi-core CPUs, improving performance and reliability.

React

Q19. What is useCallback and useMemo? When should you use them?

  • useMemo — memoizes a computed value, recomputes only when dependencies change
  • useCallback — memoizes a function reference to prevent unnecessary re-renders in child components

Use them when performance is a concern — avoid premature optimization.

Q20. Explain the React component lifecycle (functional). Functional component lifecycle via hooks:

  • Mount → useEffect(() => {}, [])
  • Update → useEffect(() => {}, [dep])
  • Unmount → return cleanup function from useEffect

Q21. What is Context API? When would you use it over Redux? Context API is React’s built-in solution for passing data deep without prop drilling. Use it for simple global state (theme, language, auth). Use Redux when state logic is complex, needs middleware, or time-travel debugging.

Q22. What is React.memo and when is it useful? React.memo is a HOC that prevents a functional component from re-rendering if its props haven’t changed. Useful for pure components receiving stable props.

jsx

const Button = React.memo(({ label }) => <button>{label}</button>);

Q23. What is prop drilling and how do you avoid it? Prop drilling is passing data through multiple layers of components that don’t need it. Avoid it with Context API, Redux, Zustand, or component composition.

React Components

Q24. What is a Higher-Order Component (HOC)? An HOC is a function that takes a component and returns a new enhanced component. Used for reusable logic like auth guards, logging, or error boundaries.

jsx

const withAuth = (Component) => (props) => {
  return isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />;
};

Q25. What are render props? A pattern where a component accepts a function as a prop and uses it to render UI — enables logic sharing between components.

jsx

<DataFetcher render={(data) => <List items={data} />} />

Q26. What is the difference between useRef and useState? Both persist values across renders, but useRef does NOT trigger re-renders on change. Use useRef for DOM access or storing mutable values without affecting render.

🔴 Level 3: Senior (3+ Years)

Node.js

Q27. How do you design a scalable Node.js REST API architecture? Key principles: separation of concerns (routes → controllers → services → repositories), environment-based config, centralized error handling, input validation (Joi/Zod), rate limiting, authentication middleware (JWT), and proper logging (Winston/Pino).

Q28. What is the difference between horizontal and vertical scaling in Node.js?

  • Vertical: Adding more CPU/RAM to the same server
  • Horizontal: Adding more server instances, using load balancers + clustering/PM2

Node.js is naturally suited to horizontal scaling.

Q29. How do you handle memory leaks in Node.js? Profile with Chrome DevTools or --inspect flag. Common causes: unclosed event listeners, global variables, closures holding large data. Use WeakMap/WeakRef for weak references and ensure cleanup in event emitters.

Q30. Explain JWT authentication implementation in Node.js. On login, server signs a JWT with a secret key and sends it to the client. Client sends it in Authorization: Bearer <token> header on each request. Server verifies the signature using jsonwebtoken library and extracts the payload.

Q31. What is rate limiting and how do you implement it? Rate limiting restricts the number of requests a client can make in a time window to prevent abuse. Use express-rate-limit middleware or Redis-based solutions for distributed systems.

React

Q32. How do you optimize a React application’s performance?

  • Code splitting with React.lazy + Suspense
  • Memoization with useMemo, useCallback, React.memo
  • Virtualization for large lists (react-window/react-virtual)
  • Avoiding unnecessary state lifting
  • Profiling with React DevTools
  • Lazy loading images

Q33. Explain React’s reconciliation algorithm (Diffing). React compares Virtual DOM trees (current vs new) using a diffing algorithm. It assumes: elements of different types produce different trees; developers hint stable elements with key prop. This makes DOM updates O(n) instead of O(n³).

Q34. What is Concurrent Mode / React 18 features? React 18 introduces concurrent rendering, allowing React to pause, resume, or abandon renders. Key features: startTransition (mark low-priority updates), useTransition, useDeferredValue, automatic batching of state updates, and Suspense improvements for data fetching.

Q35. How do you handle complex state management at scale? Options: Redux Toolkit (opinionated, predictable), Zustand (lightweight, simple), Jotai/Recoil (atomic state), React Query (server state). Separate server state (cached API data) from UI state — React Query handles the former elegantly.

Q36. What is server-side rendering (SSR) vs static site generation (SSG)?

  • SSR: HTML generated on each request (Next.js getServerSideProps) — fresh data, slower TTFB
  • SSG: HTML pre-built at build time (getStaticProps) — fastest, but stale data
  • ISR (Incremental Static Regeneration): SSG + background revalidation

React Components

Q37. What are compound components and when would you use them? A pattern where a parent component shares state with children via Context, and children are used declaratively. Think <Select>, <Tabs> — gives consumers flexible API without prop drilling.

jsx

<Tabs>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel>Content One</Tabs.Panel>
</Tabs>

Q38. What is the difference between controlled flow and uncontrolled flow in large forms? For large forms, uncontrolled with react-hook-form is better — it avoids re-rendering the entire form on each keystroke. Controlled forms (state-driven) are simpler for small forms or when you need real-time validation feedback.

Q39. How do you design a truly reusable component library?

  • Use polymorphic components (as prop)
  • Separate logic from presentation
  • Expose only necessary props, use sensible defaults
  • Support className and style overrides
  • Forward ref with forwardRef
  • Document with Storybook
  • Follow accessibility (ARIA) standards

Q40. What is error boundary and how do you implement one? Error boundaries catch JS errors in a component tree and show a fallback UI. They must be class components (no hook equivalent yet):

jsx

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    return this.state.hasError ? <h1>Something broke</h1> : this.props.children;
  }
}
Post Views: 1