React Interview Questions
1. What is React?
React is a declarative, efficient, flexible open source front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach for building reusable UI components, especially for single page application. It is used for developing interactive view layer of web and mobile apps. It was created by Jordan Walke, a software engineer at Facebook. It was initially deployed on Facebook’s News Feed section in 2011 and later used in its products like WhatsApp & Instagram.
2. Does React use HTML?
No, It uses JSX, which is similar to HTML.
3. When was React first released?
React was first released on March 2013.
4. Give me two most significant drawbacks of React
- Integrating React with the MVC framework like Rails requires complex configuration.
- React require the users to have knowledge about the integration of user interface into MVC framework.
5. State the difference between Real DOM and Virtual DOM
| Real DOM | Virtual DOM |
| It is updated slowly. | It updates faster. |
| It allows a direct update from HTML. | It cannot be used to update HTML directly. |
| It wastes too much memory. | Memory consumption is less |
6. What is Flux Concept In React?
Facebook widely uses flux architecture concept for developing client-side web applications. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.
7. Define the term Redux in React
Redux is a library used for front end development. It is a state container for JavaScript applications which should be used for the applications state management. You can test and run an application developed with Redux in different environments.
8. What is the ‘Store’ feature in Redux?
Redux has a feature called ‘Store’ which allows you to save the application’s entire State at one place. Therefore all it’s component’s State are stored in the Store so that you will get regular updates directly from the Store. The single state tree helps you to keep track of changes over time and debug or inspect the application.
9. What is an action in Redux?
It is a function which returns an action object. The action-type and the action data are always stored in the action object. Actions can send data between the Store and the software application. All information retrieved by the Store is produced by the actions.
10. Name the important features of React
Here, are important features of React.
- Allows you to use 3rd party libraries
- Time-Saving
- Faster Development
- Simplicity and Composable
- Fully supported by Facebook.
- Code Stability with One-directional data binding
- React Components
11. Explain the term stateless components
Stateless components are pure functions that render DOM-based solely on the properties provided to them.
12. What is React Router
React Router is a routing library which allows you to add new screen flows to your application, and it also keeps URL in sync with what’s being shown on the page.
13. What are the popular animation package in React ecosystem?
- React Motion
- React Transition Group
14. What is Jest?
Jest is a JavaScript unit testing framework created by Facebook based on Jasmine. It offers automated mock creation and a jsdom environment. It is also used as a testing component.
15. What is dispatcher?
A dispatcher is a central hub of app where you will receive actions and broadcast payload to registered callbacks.
16. What is meant by callback function? What is its purpose?
A callback function should be called when setState has finished, and the component is re-rendered.
As the setState is asynchronous, which is why it takes in a second callback function.
17. Explain the term high order component
A higher-order component also shortly known as HOC is an advanced technique for reusing component logic. It is not a part of the React API, but they are a pattern which emerges from React’s compositional nature.
18. Explain the Presentational segment
A presentational part is a segment which allows you to renders HTML. The segment’s capacity is presentational in markup.
19. What are Props in react js?
Props mean properties, which is a way of passing data from parent to child. We can say that props are just a communication channel between components. It is always moving from parent to child component.
20. What is the use of a super keyword in React?
The super keyword helps you to access and call functions on an object’s parent.
21. Explain yield catchphrase in JavaScript
The yield catchphrase is utilized to delay and resume a generator work, which is known as yield catchphrase.
22. Name two types of React component
Two types of react Components are:
- Function component
- Class component
23. Explain synthetic event in React js
Synthetic event is a kind of object which acts as a cross-browser wrapper around the browser’s native event. It also helps us to combine the behaviors of various browser into signal API.
24. What is React State?
It is an object which decides how a specific component renders and how it behaves. The state stores the information which can be changed over the lifetime of a React component.
25. How can you update state in react js?
A state can be updated on the component directly or indirectly.
26. Explain the use of the arrow function in React
The arrow function helps you to predict the behavior of bugs when passed as a callback. Therefore, it prevents bug caused by this all together.
27. What are the lifecycle steps of React?
Important lifecycle steps of React js are:
- Initialization
- State/Property updates
- Destruction are the lifecycle of React
28. State the main difference between Pros and State
The main difference the two is that the State is mutable and Pros are immutable.
29. Explain pure components in React js
Pure components are the fastest components which can replace any component with only a render(). It helps you to enhance the simplicity of the code and performance of the application.
30. What kind of information controls a segment in React?
There are mainly two sorts of information that control a segment: State and Props
- State: State information that will change, we need to utilize State.
- Props: Props are set by the parent and which are settled all through the lifetime of a part.
31. What is ‘create-react-app’?
‘create-react-app’ is a command-line tool which allows you to create one basic react application.
32. Explain the use of ‘key’ in react list
Keys allow you to provide each list element with a stable identity. The keys should be unique.
33. What are children prop?
Children props are used to pass component to other components as properties. You can access it by using
{props.children}
34. Explain error boundaries?
Error boundaries help you to catch Javascript error anywhere in the child components. They are most used to log the error and show a fallback UI.
35. What is the use of empty tags <> </>?
Empty tags are used in React for declaring fragments.
36. What is strict mode?
StrictMode allows you to run checks and warnings for react components. It runs only on development build. It helps you to highlight the issues without rendering any visible UI.
37. What are reacted portals?
Portal allows you to render children into a DOM node. CreatePortalmethod is used for it.
38. What is Context?
React context helps you to pass data using the tree of react components. It helps you to share data globally between various react components.
39. What is the use of Webpack?
Webpack in basically is a module builder. It is mainly runs during the development process.
40. What is Babel in React js?
Babel, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand.
41. How can a browser read JSX file?
If you want the browser to read JSX, then that JSX file should be replaced using a JSX transformer like Babel and then send back to the browser.
42. What are the major issues of using MVC architecture in React?
Here are the major challenges you will face while handling MVC architecture:
- DOM handling is quite expensive
- Most of the time applications were slow and inefficient
- Because of circular functions, a complex model has been created around models and ideas
43. What can be done when there is more than one line of expression?
At that time a multi-line JSX expression is the only option left for you.
44. What is the reduction?
The reduction is an application method of handling State.
45. Explain the term synthetic events
It is actually a cross-browser wrapper around the browser’s native event. These events have interface stopPropagation(. and preventDefault().
46. When should you use the top-class elements for the function element?
If your element does a stage or lifetime cycle, we should use top-class elements.
47. How can you share an element in the parsing?
Using the State, we can share the data.
48. Explain the term reconciliation
When a component’s state or props change then rest will compare the rendered element with previously rendered DOM and will update the actual DOM if it is needed. This process is known as reconciliation.
49. Ho can you re-render a component without using setState(. function?
You can use forceUpdate(. function for re-rending any component.
50. Can you update props in react?
You can’t update props in react js because props are read-only. Moreover, you can not modify props received from parent to child.
51. Explain the term ‘Restructuring.’
Restructuring is extraction process of array objects. Once the process is completed, you can separate each object in a separate variable.
52. Can you update the values of props?
It is not possible to update the value of props as it is immutable.
53. Explain the meaning of Mounting and Demounting
- The process of attaching the element to the DCOM is called mounting.
- The process of detaching the element from the DCOM is called the demounting process.
54. What is the use of ‘prop-types’ library?
‘Prop-types’ library allows you to perform runtime type checking for props and similar object in a recent application.
55. Explain react hooks
React hooks allows you to use State, and other React features without writing a class.
56. What are Fragments?
You can use fragment keyword to group a list of children components without using any extra nodes to the DOM.
For example :
render(. {
return (
);
}
57. What is the main difference between createElement and cloneElment?
- createElement is used by react to create react elements.
- cloneElement is used to clone an element and pass it new props.
58. What are Controlled Components?
Controlled components are component which controls the input elements.
59. Why do you need to use props.children?
This props.children allow you to pass a component as data to other components.
60. List down some of the methods in a react-dom package
Important methods for react-dom packages are:
- render()
- hydrate()
- createPortal()
- unmountComponentAtNode()
- findDOMNode()
61. How can we do server-side rendering in React?
We can use reaction serve to do the server-side rendering.
62. State the difference between getIntialState(. and constructor()?
If you want to create one component by extending ‘React. Component’, the constructor helps you to initialize the State. But, if you want to create by using ‘Reat.createClass.’ then you should use ‘genInitiaState.’
63. What is refs?
Ref are an attribute of the DOM elements. The primary purpose of the refs is to find the DOM elements easily.
64. What is ComponentWillMount()
This function is called after the DOM element removes from DOM, and it will swipe the memory, which helps you to increase the access space.
65. How to dispatch the data in-store?
We can dispatch the data to another component which should be based on the action which stores the parent component.
66. How will be you able to handle more action using redux?
In order to create the same component in more action flow, we are using the same functionality in various modules.
67. How can you spill the reducers?
We can spill the rescues based on the event actions. That action should be split in separate modules.
68. Name any five predefined prototypes used in React
Most important protoype used in React js are:
- number
- string
- array
- object
- element
69. What is the purpose of using bindActionsCreators?
BindActionCreator helps you to bind the event based on the action dispatcher to the HTML element.
70. What is REFS in React
Ref is a reference to the element. It should be avoided in most cases. However, sometimes it is used when you need to access DOM or instance of the component directly.
71. Can JSX element be attached to other JSX components?
Yes, you can use attach JSX element with other JSX components which is very much similar to nesting HTML elements.
72. What is the Current Stable Version of React?
The current stable version of React is version 17.5
73. Name out an important feature of Redux workflow features
Important features of Redux workflow are:
- Reset: Helps you to reset the State of the Store
- Revert: Allows you to roll back to the last committed State
- Sweep: All disable action that you might fire by mistake will be removed
- Commit: Helps you to make the current State the initial State.
74. State the difference between React JS and React Native
React js is a front end open-source JavaScript library used for building UIs.
Rect Native, is an open-source, mobile framework which allows developers to user React on platforms like Android and iOS
75. What are the advantages of Redux?
The main advantages of React Redux are:
- React Redux is the official UI bindings for react Application. It is kept up-to-date with any API changes to ensure that your React components behave as expected.
- It encourages good ‘React’ architecture.
- It implements many performance optimizations internally, which allows to components re-render only when it actually needs.
- It makes the code maintenance easy.
- Redux’s code written as functions which are small, pure, and isolated, which makes the code testable and independent.
76. How to access the Redux store outside a component?
You need to export the Store from the module where it created with createStore() method. Also, you need to assure that it will not pollute the global window space.
store = createStore(myReducer)
export default store
77. What is a State in React?
The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.
Let’s create a “User” component with “message state.”
import React from ‘react’
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: ‘Welcome to JavaTpoint’
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}
export default User
78. What is arrow function in React? How is it used?
The Arrow function is the new feature of the ES6 standard. If you need to use arrow functions, it is not necessary to bind any event to ‘this.’ Here, the scope of ‘this’ is global and not limited to any calling function. So If you are using Arrow Function, there is no need to bind ‘this’ inside the constructor. It is also called ‘fat arrow ‘(=>) functions.
//General way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//With Arrow Function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}
79. How can you create a component in React?
There are two possible ways to create a component in React:
Function Components: This is the simplest way to create a component in React. These are the pure JavaScript functions that accept props object as the first parameter and return React elements:
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
Class Components: The class components method facilitates you to use ES6 class to define a component. The above function component can be written as:
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
80. How to create refs?
Refs can be created by using React.createRef() and attached to React elements via the ref attribute. It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return <div ref={this.callRef} />;
}
}
React Interview Questions with answers pdf download online exam test
1. How does React work.
2. What is context.
3. What is virtual DOM.
4. What is props in ReactJS.
5. What is the use of refs.
6. What is JEST.
7. What are the advantages of ReactJS.
8. What is ReactJS.
9. How to write comments in ReactJS.
10. How would you write an inline style in React.
11. What are the major features of ReactJS.
12. What are props in React.
13. What are the differences between a class component and functional component.
14. Where in a React component should you make an AJAX request.
15. What is the difference between state and props.
16. What is the difference between a Presentational component and a Container component.
17. What are refs used for in React.
18. What’s the difference between a controlled component and an uncontrolled one in React.
19. What are controlled components.
20. What is state in ReactJS.
21. When to use a Class Component over a Functional Component.
22. What does it mean for a component to be mounted in React.
23. How do we pass a property from a parent component props to a child component.
24. What are fragments.
25. When rendering a list what is a key and what is it’s purpose.
26. How to create refs.
27. What happens when you call setState.
28. What are stateful components.
29. How would you prevent a component from rendering in React.
30. What is JSX.
31. How error boundaries handled in React (15).
32. Where is the state kept in a React + Redux application.
33. What are the limitations of ReactJS.
34. What is the difference between React Native and React.
35. What are stateless components.
36. How is React different from AngularJS (1.x).
37. What is the point of Redux.
38. Why is it necessary to capitalize the components.
39. What is the difference between state and props.
40. What is Flow.
41. How to create components in ReactJS.
42. What is the purpose of callback function as an argument of setState.
43. What are portals in ReactJS.
44. How to pass a parameter to an event handler or callback.
45. What’s the difference between an “Element” and a “Component” in React.
46. What happens during the lifecycle of a React component.
47. What is Flux.
48. What is the difference between component and container in react Redux.
49. What is inline conditional expressions.
50. How do you prevent the default behavior in an event callback in React.
51. What is reconciliation.
52. What is the purpose of using super constructor with props argument.
53. What happens when you call “setState”.
54. Describe how events are handled in React.
55. What is the difference between Element and Component.
56. What are Higher-Order components.
57. Name the different lifecycle methods.
58. What is a higher order component.
59. What is JSX.
60. What is state in react.
61. What are controlled components.
62. What is a store in redux.
63. How would you prevent a component from rendering.
64. What don’t you like about React.
65. What advantages are using arrow functions.
66. Why is it advised to pass a callback function to setState as opposed to an object.
67. What’s the typical pattern for rendering a list of components from an array of data.
68. What are PropTypes in React.
69. What are Pure Components.
70. What are the advantages of React over VueJS.
71. Name some popular Flux Librarie.
72. What’s the typical flow of data like in a React + Redux app.
73. What are synthetic events in ReactJS.
74. What’s an alternative way to avoid having to bind to this in event callback methods.
75. What are some limitations of things you shouldn’t do in the component’s render method.
76. How to bind methods or event handlers in JSX callbacks.
77. What is useState() in React.
78. What is the difference between createElement and cloneElement.
79. Why fragments are better than container divs.
80. What is prop drilling and how can you avoid it.
81. What is an action.
82. What is the point of shouldComponentUpdate() method.
83. What are forward refs.
84. What do these three dots (…) in React do.
85. How do you tell React to build in Production mode and what will that do.
86. What are typical ware choices for handling asynchronous calls in Redux.
87. What are the lifecycle methods of ReactJS.
88. What are the different phases of ReactJS component lifecycle.
89. What is Key and benefit of using it in lists.
90. What’s the difference between an Element and a Component in React.
91. What is the difference between ShadowDOM and VirtualDOM.
92. Why do class methods need to be bound to a class instance.
93. What are stateless components.
94. What is ReactDOM.
95. What is children prop.
96. Why ReactJS uses className over class attribute.
97. What are React Hooks.
98. What does “shouldComponentUpdate” do and why is it important.
99. What’s the difference between a “smart” component and a “dumb” component.
100. What is the render method for.
101. What is Lifting State Up in ReactJS.
102. Why should not we update the state directly.
103. How to set state with a dynamic key name.
104. What’s the difference between useRef and createRef.
105. What is StrictMode in React.
106. What is the alternative of binding this in the constructor.
107. What is the difference between createElement and cloneElement.
108. What is the point of using keys in React.
109. What would be the common mistake of function being called every time the component renders.
110. What are advantages of using React Hooks.
111. What can you tell me about JSX.
112. What is the difference between HTML and React event handling.
113. What are error boundaries in ReactJS (16).
114. What is reconciliation in React.
115. What are uncontrolled components.
116. What is equivalent of the following using React.createElement.
117. Given the code defined above, can you identify two problems.
118. What is a reducer.
119. What is the purpose of super(props).
120. What is “Children”.
121. Why would you eject from create-react-app.
122. What is the difference between ReactJS and Angular.
123. Explain the Virtual DOM concept in React.
124. What is the difference between a controlled component and an uncontrolled component.
125. Which is preferred option with in callback refs and findDOMNode().
126. What are the recommended ways for static type checking.
127. Describe Flux vs MVC.
128. Why would you use forceUpdate in a React component.
129. What is React Fiber.
130. What are some recent changes in the React library (e.g. in version 14, 15).
131. Why does React use SyntheticEvents.
132. How would you go about investigating slow React application rendering.
133. What’s a pure functional component in React.
134. What is the second argument that can optionally be passed to setState and what is its purpose.
135. When is it important to pass props to super(), and why.
136. Do Hooks replace render props and higher-order components.
137. Why would you need to bind event handlers to “this”.
138. What is the difference between Flow and PropTypes.
139. What is the difference between using constructor vs getInitialState in React.
140. Why are String Refs legacy.
141. Are you familiar with Flux.
142. What is the React context.
143. Why would you use React.Children.map(props.children, () => ) instead of props.children.map(() => ).
144. What is mapStateToProps and mapDispatchToProps.
145. How to create props proxy for HOC component.
146. How to conditionally add attributes to React components.
147. Does React re-render all components and sub components every time setState is called.
148. If you need to access the underlying DOM node for a React component, what’s the typical way to do this in React.
149. How to apply validation on Props in ReactJS.
150. When would you use StrictMode component in React.
151. What is a Pure Function.
152. Explain some difference between Flux and AngularJS (1.x) approac.
153. What is reselect and how it works.
154. What is the key architectural difference between a JavaScript library such as React and a JavaScript framework such as Angular.
155. What is Redux Thunk used for.
156. What is React Fiber.
157. How to use Polymer in ReactJS.
158. How to avoid the need for binding in React.
159. How does React renderer work exactly when we call setState.
160. If you created a React element like Twitter below, what would the component definition of Twitter look like.
161. What is wrong with this code?