ReactJS Interview Questions and answers
Welcome techies! Here we would be looking into the frequently asked ReactJS Interview Questions and their corresponding answers. But first let us look into a brief introduction to React.
React is a JavaScript library for building user interfaces (UI). It is one of the major technologies amongst the MERN stack which is quite popular within the Developer community both Front-End and Full Stack.
Now let us discuss the frequent and popular interview questions and their expected answers on ReactJS.
1.) What is React?
React is a front-end JavaScript library developed by Facebook in 2011. It follows the component based approach which helps in building reusable UI components. It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
2.)What are some of the major features of React?
Some of the major features of React are as follows:
- It uses the virtual DOM instead of the real DOM.
- Has server-side rendering.
- It follows uni-directional data flow or data binding.
3.)Differentiate between Real DOM and Virtual DOM?
| Real DOM | Virtual DOM |
| 1. It updates slow. | 1. It updates faster. |
| 2. Can directly update HTML. | 2. Can’t directly update HTML. |
| 3. Creates a new DOM if element updates. | 3. Updates the JSX if element updates. |
| 4. DOM manipulation is very expensive. | 4. DOM manipulation is very easy. |
| 5. Too much of memory wastage. | 5. No memory wastage. |
4.) What are React Components?
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components.
Class Component
They are regular ES6 classes that extend the component class from React Library. A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.
The component also requires a render() method, this method returns HTML.
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Functional Components
They are the actual Java Script functions. They also return HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand.
functionCar(){
return<h2>Hi, I am a Car!</h2>;
}
5.) What is JSX
JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand.
6.) What do you understand by Virtual DOM? How does it work?
A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.
This Virtual DOM works in three simple steps :
- Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
- Then the difference between the previous DOM representation and the new one is calculated.
- Once the calculations are done, the real DOM will be updated with only the things that have actually changed.
7.) What are Props in ReactJS?
Props is the shorthand for Properties in React. They are read-only components which must be pure i.e. immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally comes handy to render the dynamically generated data.
8.) What is a State?
A state is an object privately maintained inside a component. It can influence what is rendered in the browser. They can also be changed in a component. States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed using this.state().
9.) What are stateful and stateless components?
| Stateful Component | Stateless Component |
| 1. Stores info about component’s state change in memory | 1. Calculates the internal state of the components |
| 2. Have authority to change state | 2. Do not have the authority to change state |
| 3. Contains the knowledge of past, current and possible future changes in state | 3. Contains no knowledge of past, current and possible future state changes |
| 4. Stateless components notify them about the requirement of the state change, then they send down the props to them. | 4. They receive the props from the Stateful components and treat them as callback functions. |
10.) What are the different Life Cycle Methods?
When we create a react component, it goes through several stages in its life cycle. In React, we have built-in methods which we can overwrite at particular stages in life cycle.
Component’s life cycle has 4 phases:
- Component Mounting Life Cycle Method – invokes when the instance of component is being created and inserted into the DOM.
- Updating life cycle method – called when component is being re rendered because of changes in props or state
- Unmounting Phase – invoked immediately before a component is unmounted and destroyed.
- Error Handling Phase – during rendering lifecycle methods and in the constructor of the whole tree below them.
11.) What is an event in React?
- In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:
- Events name uses camel case instead of just using the lowercase.
- Events are passed as functions instead of strings.
The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior having access via its event handler only.
12.) What are High Order Components (HOC)?
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derive from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.
13.) What are Pure Components?
Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.
14.) What are the significant uses of HOC?
- HOC can be used for many tasks like:
- Code reuse, logic and bootstrap abstraction
- Render High jacking
- State abstraction and manipulation
- Props manipulation
15.) What is the significance of Keys in React?
Keys are useful for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.
Similar articles – ReactJS Interview Questions and answers
- Benefits of Using Angular for Web Development 2021
- Difference Between C vs C++ vs Python vs Java
- KALI Linux Not Prefer Software Development Ubuntu
- Angular 12 Performance Benchmark Install Features
- Setup Angular 12 vs 11 vs 10 features benchmark
