In Part 2 of our React interview prep series, we go deeper into advanced React topics — from StrictMode, Context API, and React Portals to Hooks, Server-Side Rendering, and Redux techniques.
REACT INTERVIEW QUESTIONS & ANSWERS – PART 2
36. What is StrictMode in React?
StrictMode is a development tool provided by React to highlight potential problems in an application. It doesn’t render any UI on its own and has no effect on the production build. Instead, it activates additional checks and warnings for its children components. It helps identify unsafe lifecycle methods, deprecated APIs, and side effects in rendering. You use it by wrapping components in <React.StrictMode>.
37. What are React Portals?
React Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is particularly useful for modals, popups, or tooltips, where the component structure shouldn’t be limited by parent CSS rules. You can create a portal using:
38. What is Context in React?
React Context is a way to pass data through the component tree without having to pass props manually at every level. It’s useful for global data such as themes, authentication, or language preferences. It includes three main steps:
Creating a context with
React.createContext().Wrapping components with a provider.
Accessing the value using a consumer or the
useContexthook.
39. What is Webpack?
Webpack is a powerful module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules. In a React project, Webpack bundles all JavaScript, CSS, images, and other resources into a format that browsers can understand, optimizing them for performance.
40. What is Babel in React?
Babel is a JavaScript compiler that converts modern JavaScript code (like ES6/ES7 and JSX) into a backward-compatible version (usually ES5) that can run in older browsers. It plays a crucial role in React by transforming JSX syntax into React.createElement() calls.
41. How can a browser read JSX files?
Browsers cannot understand JSX directly. JSX must be transpiled into standard JavaScript using tools like Babel before it can be run in the browser. This process typically happens as part of the build step using Webpack and Babel together.
42. What are the challenges of using MVC architecture in React?
Traditional MVC (Model-View-Controller) architectures involve complex interactions between views and models, which can cause performance issues, especially with frequent DOM updates. React replaces this with a simpler, unidirectional data flow using a Virtual DOM, minimizing direct manipulation of the real DOM and avoiding tight coupling.
43. What can you do when there’s more than one line of expression in JSX?
When JSX spans multiple lines, you can enclose the block in parentheses to avoid syntax errors and improve readability. Example:
44. What is “reduction” in React or Redux?
In Redux, a “reduction” refers to the process of reducing a set of inputs (actions) into a single output (new state) using reducer functions. Reducers take the current state and an action and return a new state. It’s a pure function and is a core part of Redux’s data flow model.
45. What are Synthetic Events in React?
Synthetic Events are cross-browser wrappers around the browser’s native event system. They normalize events so that they work consistently across all browsers. React creates Synthetic Events for all its supported events (like onClick, onChange) to provide a consistent API.
46. When should you use class components instead of function components?
Before Hooks, class components were required for using lifecycle methods and local state. With Hooks, most of their use cases can now be handled in functional components. However, in older codebases or for certain advanced patterns, class components may still be used.
47. How can you share data between components?
Data can be shared in several ways:
Parent to child: via props.
Child to parent: via callback functions passed as props.
Across non-related components: via React Context or state management libraries like Redux or Zustand.
48. What is Reconciliation in React?
Reconciliation is the process by which React updates the DOM. When state or props change, React compares the new Virtual DOM with the previous one (using a diffing algorithm), determines what changed, and updates only the changed parts of the real DOM. This improves performance.
49. How can you re-render a component without using setState()?
In class components, you can use this.forceUpdate() to force a re-render. However, this is discouraged as it bypasses the standard lifecycle and can lead to unpredictable behavior. It’s better to update state properly.
50. Can you update props in React?
No. Props are read-only and immutable from the perspective of the child component. Only the parent component can pass new props. Modifying props directly inside a component is considered a bad practice and causes errors.
51. What is Destructuring (Restructuring) in JavaScript?
Destructuring is a JavaScript feature that allows unpacking values from arrays or properties from objects into distinct variables. Example:
52. Can you change the value of props?
No, props cannot be changed within a component. If a value needs to be changed, it should be passed from the parent as new props, or managed via state.
53. What is Mounting and Unmounting in React?
Mounting: When a component is being added to the DOM. This triggers methods like
constructor,componentDidMount.Unmounting: When a component is being removed from the DOM. The
componentWillUnmountmethod is used for cleanup.
54. What is the prop-types library used for?
prop-types is a React library for validating the types of props passed to a component. It helps catch bugs by ensuring components receive the correct data types. Example:
55. What are React Hooks?
Hooks are functions introduced in React 16.8 that allow you to use state, lifecycle methods, and other React features in functional components. Common hooks include useState, useEffect, useContext, useReducer, and useRef.
56. What are Fragments in React?
Fragments let you group multiple elements without adding extra nodes to the DOM. This avoids unnecessary <div> wrappers. You can use either <React.Fragment> or shorthand <>...</>.
Example:
57. What is the difference between createElement and cloneElement?
createElementis used to create new React elements (usually via JSX).cloneElementis used to clone and modify existing React elements, often useful for extending child components dynamically.
58. What are Controlled Components?
Controlled components are form elements (like inputs, selects) whose values are controlled by React state. Any changes are handled through event handlers updating state. This ensures UI and data are in sync.
59. Why use props.children in React?
props.children allows components to receive and render nested elements between their opening and closing tags. It’s especially useful for layout components and wrappers.
60. Common methods in the react-dom package?
render(): Renders a React element into the DOM.hydrate(): Used for server-side rendering to attach event listeners.createPortal(): Renders children into a different DOM node.unmountComponentAtNode(): Removes a React component from the DOM.findDOMNode(): Gets the underlying DOM node (use is discouraged with hooks).
61. How do you implement Server-Side Rendering (SSR) in React?
SSR involves rendering React components on the server and sending the HTML to the client. This improves SEO and initial load time. Tools like Next.js make SSR easy. Core React also supports it via ReactDOMServer.renderToString().
62. What’s the difference between getInitialState() and constructor()?
getInitialState()was used in older React versions withReact.createClass.constructor()is used in ES6 class components to initialize state and bind methods. It’s the recommended modern approach.
63. What are refs in React?
Refs (short for references) provide a way to access DOM elements or React component instances directly. They’re created using React.createRef() or the useRef() hook. They should be used sparingly.
64. What is componentWillUnmount()?
This lifecycle method is called just before a component is removed from the DOM. It’s used for cleanup operations like clearing timers, cancelling network requests, or removing subscriptions.
65. How do you dispatch data to the store in Redux?
You use the dispatch() method to send an action to the Redux store. This action is then processed by reducers to update the application state.
66. How do you handle multiple actions in Redux?
You can use action creators and middleware (like redux-thunk or redux-saga) to manage multiple asynchronous actions, allowing sequential or parallel execution.
67. How can you split reducers in Redux?
Redux allows combining multiple reducers using the combineReducers() function. Each reducer manages its own piece of the state, making the code more modular and maintainable.
68. Common PropTypes used in React?
PropTypes.stringPropTypes.numberPropTypes.arrayPropTypes.objectPropTypes.element
These are used to define expected prop types for better type-checking.
69. What is the purpose of bindActionCreators?
bindActionCreators is a utility function from Redux that binds action creators to the dispatch() method. This avoids manually calling dispatch(actionCreator()).
70. What is the use of refs in React?
Refs are used to access or manipulate DOM elements or class component instances directly. This is useful for controlling focus, selecting text, or triggering animations, but should be avoided unless necessary.
CONCLUSION:
With this, you’ve completed all 70 React interview questions! These questions will help you gain confidence for interviews and improve your React skills. Whether you’re a fresher or an experienced developer, staying sharp with both fundamentals and advanced topics is key to success.
Join Our Telegram Group (1.9 Lakhs + members):- Click Here To Join
For Experience Job Updates Follow – FLM Pro Network – Instagram Page
For All types of Job Updates (B.Tech, Degree, Walk in, Internships, Govt Jobs & Core Jobs) Follow – Frontlinesmedia JobUpdates – Instagram Page
For Healthcare Domain Related Jobs Follow – Frontlines Healthcare – Instagram Page
For Major Job Updates & Other Info Follow – Frontlinesmedia – Instagram Page
