React.js & Next.js
React.js & Next.js Interview Questions and Answers
Section 1: React Core Concepts
1. What is JSX?
Answer: JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe UI elements.
const element = <h1>Hello, world!</h1>;
JSX gets transpiled to React.createElement calls.
2. Explain Virtual DOM.
Answer: Virtual DOM is a lightweight JavaScript representation of the real DOM. When state changes, a new virtual DOM is created and compared with the previous one using diffing algorithms. Only the changed elements are updated in the real DOM.
3. What are React hooks?
Answer: Hooks are functions that let you use state and lifecycle features in functional components.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
4. What is the difference between useEffect and useLayoutEffect?
Answer:
-
useEffect: Runs asynchronously after the paint. -
useLayoutEffect: Runs synchronously after all DOM mutations and before the browser paints.
5. What is the primary motivation behind the introduction of React Hooks?
Answer: To enable state and lifecycle features in functional components
6. What is the use of useRef?
Answer: useRef is used to persist values across renders without causing re-renders. It's also used to access DOM elements directly.
const inputRef = useRef();
<input ref={inputRef} />
7. Explain the concept of lifting state up.
Answer: Lifting state up refers to moving state to a common ancestor component to share data between sibling components.
8. What are higher-order components (HOC)?
Answer: HOCs are functions that take a component and return a new component with enhanced behavior.
const withLogging = (Component) => (props) => {
console.log('Rendering');
return <Component {...props} />;
};
9. What is the role of key in a list?
Answer: Keys help React identify which items have changed, are added, or removed. They should be stable and unique.
10. What are fragments in React?
Answer: Fragments let you group elements without adding extra nodes to the DOM.
<>
<td>Cell1</td>
<td>Cell2</td>
</>
11. What is the difference between props and state?
Answer:
-
Props: Read-only, passed from parent to child.
-
State: Local, managed within the component.
12. Explain useReducer.
Answer: useReducer is used for complex state logic.
const [state, dispatch] = useReducer(reducer, initialState);
13. Can you explain React context?
Answer: Context provides a way to pass data through the component tree without props drilling.
14. What is prop drilling?
Answer: Passing props down multiple levels which can be avoided using context or state management libraries.
15. How do you handle errors in React components?
Answer: Use error boundaries.
class ErrorBoundary extends React.Component {
componentDidCatch(error, info) { ... }
}
16. How does reconciliation work in React?
Answer: React compares the virtual DOM and applies minimal changes using a diffing algorithm.
17. What is lazy loading in React?
Answer: Lazy loading allows you to load components only when they are needed.
const LazyComponent = React.lazy(() => import('./Component'));
18. What is suspense in React?
Answer: Suspense is used to handle the loading state of lazy components.
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
19. What is the difference between class and functional components?
Answer: Class components use lifecycle methods and this, while functional components use hooks and are more concise.
20. What are controlled and uncontrolled components?
Answer: Controlled components rely on React state; uncontrolled ones use DOM references.
Section 2: Component Design & Optimization
1. What is component reusability?
Answer: Building generic components that can be reused with different props.
2. What is memoization in React?
Answer: Memoization avoids re-renders if props/state don’t change.
React.memo(MyComponent);
3. How to optimize React performance?
Answer:
-
Use
React.memo,useCallback,useMemo -
Avoid inline functions in render
-
Code-splitting
4. What is useMemo?
Answer: Caches expensive calculations.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
5. What is useCallback?
Answer: Caches function instances.
const memoizedFn = useCallback(() => doSomething(a), [a]);
6. What is a pure component?
Answer: A component that re-renders only if props/state change.
7. What is a stateless component?
Answer: A component that does not manage any internal state.
8. Explain lazy loading images.
Answer: Load images as needed.
<img loading="lazy" src="image.jpg" />
9. Why avoid anonymous functions in render?
Answer: They create new function instances and cause unnecessary re-renders.
10. How to handle large lists in React?
Answer: Use virtualization libraries like react-window or react-virtualized.
11. What is debounce and throttle?
Answer:
-
Debounce: Waits for a pause.
-
Throttle: Executes every interval.
12. What are render props?
Answer: A pattern for sharing code between components using props as functions.
13. What is code splitting?
Answer: Breaking code into smaller bundles to load on demand.
14. How does suspense help in optimization?
Answer: Delays rendering until the component is ready.
15. What are compound components?
Answer: Components that work together and share implicit state.
16. What is the significance of key prop?
Answer: Helps React identify which items changed.
17. When should you use useLayoutEffect?
Answer: When DOM measurements or layout changes are needed immediately.
18. How does reconciliation affect performance?
Answer: Efficient diffing minimizes DOM updates.
19. What is shouldComponentUpdate?
Answer: A lifecycle method to prevent re-rendering.
20. How do you detect performance issues?
Answer: Use React Profiler and DevTools.
Section 3: Next.js Fundamentals
1. What is Next.js?
Answer: A React framework for server-side rendering and static site generation.
2. Explain file-based routing.
Answer: Routes are based on the file structure in /pages.
3. What are dynamic routes?
Answer: Use square brackets in filenames, e.g. [id].js
4. What is getStaticProps?
Answer: Generates static pages at build time.
5. What is getServerSideProps?
Answer: Generates pages on each request.
6. What is getStaticPaths?
Answer: Used with dynamic routes for static generation.
7. What is Link in Next.js?
Answer: Used for client-side navigation.
import Link from 'next/link';
<Link href="/about">About</Link>
8. How to create an API route?
Answer: Create a file under /pages/api/.
9. What is the Image component?
Answer: Optimizes image loading.
import Image from 'next/image';
<Image src="/img.jpg" width={500} height={300} />
10. What is ISR?
Answer: Incremental Static Regeneration updates static pages post-deployment.
11. How does middleware work?
Answer: Executes logic before routing.
12. What are the differences between SSR, SSG, and ISR?
Answer:
-
SSR: Per request
-
SSG: At build
-
ISR: On-demand re-generation
13. What is app directory in Next 15?
Answer: New routing mechanism with server and client components.
14. What is Server Component?
Answer: Renders on the server, no client-side JS.
15. What is next/head?
Answer: Manage <head> content like title and meta tags.
16. How to handle environment variables?
Answer: Use .env.local and process.env.MY_VAR
17. How does Next.js support SEO?
Answer: SSR and head management improve crawlability.
18. How to deploy a Next.js app?
Answer: Use Vercel, Netlify, or self-host with Node.js.
19. What is prefetching?
Answer: Next.js prefetches linked pages for faster nav.
20. Can you use Redux with Next.js?
Answer: Yes, wrap _app.js with a provider.
Section 4: State Management
1. What is state management in React?
Answer: It refers to the process of managing and sharing the state (data) across components.
2. What are the common state management approaches?
Answer:
-
Local state (useState, useReducer)
-
Context API
-
Redux
-
Zustand, Jotai, Recoil (modern alternatives)
3. When should you use Redux?
Answer: When the app has complex state logic, needs global state, or shared state across many components.
4. What is Redux?
Answer: A predictable state container for JavaScript apps, using actions, reducers, and a centralized store.
5. What are actions in Redux?
Answer: Plain JavaScript objects with a type field, used to signal state changes.
const incrementAction = { type: 'INCREMENT' };
6. What is a reducer?
Answer: A pure function that takes the current state and an action, then returns the new state.
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT': return state + 1;
default: return state;
}
}
7. What is the Redux store?
Answer: The single source of truth that holds the application's state.
import { createStore } from 'redux';
const store = createStore(counterReducer);
8. How to connect React with Redux?
Answer: Use react-redux with <Provider> and useSelector, useDispatch hooks.
9. What is the Context API?
Answer: A built-in React API for global state management without external libraries.
const MyContext = React.createContext();
10. How do you use Context API?
Answer: Create a context, provide it, and consume it with useContext().
const value = useContext(MyContext);
11. What is useReducer good for?
Answer: Managing complex state logic with multiple sub-values.
12. How is useReducer different from Redux?
Answer: useReducer is local to a component, Redux is global.
13. How to share state between components without props?
Answer: Use Context API or state management libraries like Redux or Zustand.
14. What is Zustand?
Answer: A minimalistic and fast state-management solution using hooks.
const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) }));
15. What is Recoil?
Answer: A state management library by Facebook for complex shared state and derived data.
16. What are atoms and selectors in Recoil?
Answer:
-
Atom: A unit of state
-
Selector: A derived state computed from atoms
17. What are middleware in Redux?
Answer: Functions that sit between dispatching an action and reaching the reducer (e.g., redux-thunk, redux-saga).
18. Which function is used to create a root for a React application in React 18 and later???
Answer: ReactDOM.createRoot()
19. What are selectors in Redux?
Answer: Functions that retrieve specific slices of state.
20. When to lift state up?
Answer: When multiple components need to share and modify the same state.
21. What is an immutable state?
Answer: A state that is not directly mutated; instead, new copies are created for updates.
22. How do you debug Redux?
Answer: Use Redux DevTools Extension for real-time inspection and time-travel debugging.
23. What is Immer?
Answer: A library that allows writing immutable state logic with mutable syntax.
24. Can Context API replace Redux?
Answer: For small/medium apps, yes. For complex apps with middleware and large state trees, Redux is better.
25. What is the main benefit of "Automatic Batching" in React 18?
Answer: It groups multiple state updates into a single re-render for better performance.