React Advanced

Question 1

What is server-side rendering (SSR) in React?

Answer 1

Rendering React components on the server and sending HTML to the client for faster load and SEO.

Question 2

What is hydration in SSR?

Answer 2

The process where React attaches event listeners to server-rendered HTML on the client.

Question 3

What are the main differences between SSR and client-side rendering?

Answer 3

SSR renders HTML on the server and improves SEO/load time; CSR renders in the browser after JS loads.

Question 4

How does Next.js enhance React applications?

Answer 4

It provides SSR, file-based routing, API routes, and static generation for production-ready apps.

Question 5

What is static site generation (SSG)?

Answer 5

A method to pre-render pages at build time for performance and scalability.

Question 6

What are React Suspense and Concurrent Mode?

Answer 6

Suspense allows lazy loading of components; Concurrent Mode enables interruptible rendering for better responsiveness.

Question 7

What is the difference between useTransition and useDeferredValue?

Answer 7

useTransition lets you mark updates as non-urgent; useDeferredValue postpones a value update until more urgent tasks finish.

Question 8

What is React Fiber?

Answer 8

A complete rewrite of React’s core algorithm to enable concurrency and incremental rendering.

Question 9

How do you handle authentication in a React app?

Answer 9

Using tokens (JWT), context or state for user session, and protected routes via React Router.

Question 10

How does context API compare to Redux?

Answer 10

Context is simpler for small global states; Redux offers more control, middleware, and dev tools.

Question 11

What is Redux Toolkit?

Answer 11

A standardized, efficient way to write Redux logic with less boilerplate.

Question 12

What is the purpose of middleware in Redux?

Answer 12

To intercept and handle actions for tasks like async calls (e.g., Redux Thunk, Redux Saga).

Question 13

What is the React Profiler API?

Answer 13

A tool to measure the performance of React components during render cycles.

Question 14

How can you reduce bundle size in React apps?

Answer 14

By code splitting, tree shaking, using React.lazy, and avoiding unnecessary libraries.

Question 15

What is tree shaking?

Answer 15

A process during build that removes unused code from bundles.

Question 16

What are render props?

Answer 16

A technique for sharing code between components using a function prop that returns JSX.

Question 17

What is a higher-order component (HOC)?

Answer 17

A function that takes a component and returns a new component with enhanced behavior.

Question 18

What are the downsides of HOCs?

Answer 18

They can lead to wrapper hell, harder debugging, and prop collisions.

Question 19

What is useImperativeHandle?

Answer 19

A hook to customize the instance value exposed when using React.forwardRef.

Question 20

What is React.forwardRef?

Answer 20

A function to pass refs from parent to child components.

Question 21

What is the difference between controlled and uncontrolled components?

Answer 21

Controlled are managed by React state; uncontrolled store state in the DOM.

Question 22

How do you test React components?

Answer 22

Using Jest and React Testing Library to write unit and integration tests.

Question 23

What is shallow rendering in testing?

Answer 23

Rendering only the component under test without its children to isolate behavior.

Question 24

What is the role of React Testing Library?

Answer 24

To test components from the user’s perspective, focusing on accessibility and actual DOM output.

Question 25

How do you mock API calls in React tests?

Answer 25

Using libraries like MSW (Mock Service Worker) or jest.fn() for simulating responses.

Question 26

What is a custom hook and when would you use one?

Answer 26

A reusable function using other hooks to share logic across components.

Question 27

What are some rules of hooks?

Answer 27

Only call hooks at the top level and only from React functions or custom hooks.

Question 28

What is the purpose of React.StrictMode?

Answer 28

To identify unsafe lifecycle methods, highlight potential issues, and ensure compatibility with future features.

Question 29

What does key prop help with in React lists?

Answer 29

It helps React track list item changes and optimize re-renders.

Question 30

Why is reconciliation important in React?

Answer 30

It enables React to efficiently update the DOM by comparing virtual DOM trees.

Question 31

How does React handle synthetic events?

Answer 31

It wraps native events in a cross-browser wrapper for consistent behavior.

Question 32

What is useRef and when would you use it?

Answer 32

To persist values across renders or reference DOM nodes.

Question 33

What is the difference between useRef and createRef?

Answer 33

useRef is for function components; createRef is mainly for class components.

Question 34

What is a render cycle in React?

Answer 34

The process of rendering a component, committing changes, and triggering effects.

Question 35

How do you optimize re-renders in large component trees?

Answer 35

Using memoization (React.memo, useMemo), useCallback, and selective rendering.

Question 36

What is useReducer and how does it compare to useState?

Answer 36

useReducer is better for complex state logic; it manages state transitions via actions.

Question 37

How do you structure a scalable React project?

Answer 37

By organizing components, hooks, services, and state logically using feature- or domain-based folders.

Question 38

What are atomic design principles in UI development?

Answer 38

A methodology dividing UI into atoms, molecules, organisms, templates, and pages.

Question 39

What is a stale closure in React and how can you fix it?

Answer 39

An outdated variable in a closure; fix using refs or dependencies in useEffect.

Question 40

How do you integrate WebSockets in React?

Answer 40

Use useEffect to establish the connection and clean up on unmount, managing state updates with events.