React Native Interview Question and Answer
React Native is a JavaScript library for
building single base web applications fast and scalable front-ends.
For developers coming from the JavaScript
backgrounds, the process of developing web applications becomes easier.
Let’s understand the core concepts of
React, by answering the frequently asked interview questions.
1. 1. What are the
advantages of using react?
·
Use of Virtual
DOM to improve efficiency
·
React uses
virtual DOM to render the view. As the name suggests, virtual DOM is a virtual
representation of the real
·
DOM. Each time
the data changes in a react app, a new virtual DOM gets created. Creating a
virtual DOM is much
·
Faster than
rendering the UI inside the browser. Therefore, with the use of virtual DOM,
the efficiency of the app
·
Improves.
·
Gentle learning
curve
·
React has a
gentle learning curve when compared to frameworks like Angular. Anyone with
little knowledge of
·
JavaScript can
start building web applications using React.
·
SEO friendly
·
React allows
developers to develop engaging user interfaces that can be easily navigated in
various search engines.
·
It also allows
server-side rendering, which boosts the SEO of an app.
·
Reusable
components
·
React uses
component-based architecture for developing applications. Components are
independent and reusable bits of
·
code. These
components can be shared across various applications having similar
functionality. The re-use of
·
Components
increase the pace of development.
·
Huge ecosystem of
libraries to choose from React provides you the freedom to choose the tools,
libraries, and
·
Architecture for
developing an application based on your requirement.
2. What is JSX?
JSX
stands for JavaScript XML.
It
allows us to write HTML inside JavaScript and place them in the DOM without
using functions like appendChild( ) or createElement( ).
As
stated in the official docs of React, JSX provides syntactic sugar for
React.createElement( ) function.
**Note-
We can create react applications without using JSX as well.
Let’s
understand how JSX works:
Without
using JSX, we would have to create an element by the following process:
const
text = React.createElement('p', {}, 'This is a text');
const
container = React.createElement('div','{}',text );
ReactDOM.render(container,rootElement);
Using
JSX, the above code can be simplified:
const
container = (
<div>
<p>This is a text</p>
</div>
);
ReactDOM.render(container,rootElement);
As
one can see in the code above, we are directly using HTML inside JavaScript.
3. What are the differences between functional
and class components?
Before the introduction of Hooks in
React, functional components were called stateless components and were behind
class components on feature basis. After the introduction of Hooks, functional
components are equivalent to class components.
Although functional components are the
new trend, the react team insists on keeping class components in React.
Therefore, it is important to know how these both components differ.
On the following basis let’s compare
functional and class components:
Decalaration
Functional components are nothing but
JavaScript functions and therefore can be declared using an arrow function or
the function keyword:
function card(props){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
const card = (props) =>{
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
Class components on the other hand,
are declared using the ES6 class:
class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
}
Handling props
Let’s render the following component
with props and analyse how functional and class components handle props:
<StudentInfo name="Vivek"
rollNumber="23" />
In functional components, the handling
of props is pretty straight forward. Any prop provided as an argument to a
functional component, can be directly used inside HTML elements:
function StudentInfo(props){
return(
<div className="main">
<h2>{props.name}</h2>
<h4>{props.rollNumber}</h4>
</div>
)
}
In the case of class components, props
are handled in a different way:
class StudentInfo extends
React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className="main">
<h2>{this.props.name}</h2>
<h4>{this.props.rollNumber}</h4>
</div>
)
}
}
As we can see in the code above, this
keyword is used in the case of class components.
Handling state
Functional components use React hooks
to handle state.
It uses the useState hook to set state
of a variable inside the component:
function ClassRoom(props){
let [studentsCount,setStudentsCount] =
useState(0);
const addStudent = () => {
setStudentsCount(++studentsCount);
}
return(
<div>
<p>Number of students in class room: {studentsCount}</p>
<button onClick={addStudent}>Add Student</button>
</div>
)
}
Since useState hook returns an array
of two items, the first item contains the current state, and the second item is
a function used to update the state.
In the code above, using array
destructuring we have set the variable name to studentsCount with a current
value of “0” and setStudentsCount is the function that is used to update the
state.
For reading the state, we can see from
the code above, the variable name can be directly used to read the current
state of the variable.
We cannot use React Hooks inside class
components, therefore state handling is done very differently in a class
component:
Let’s take the same above example and
convert it into a class component:
class ClassRoom extends
React.Component{
constructor(props){
super(props);
this.state = {studentsCount : 0};
this.addStudent =
this.addStudent.bind(this);
}
addStudent(){
this.setState((prevState)=>{
return {studentsCount:
prevState.studentsCount++}
});
}
render(){
return(
<div>
<p>Number of students in
class room: {this.state.studentsCount}</p>
<button
onClick={this.addStudent}>Add Student</button>
</div>
)
}
}
In the code above, we see we are using
this.state to add the variable studentsCount and setting the value to “0”.
For reading the state, we are using
this.state.studentsCount.
For updating the state, we need to
first bind the addStudent function to this. Only then, we will be able to use
the setState function which is used to update the state.
As stated by the react team, virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.
Why was virtual DOM introduced? DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.
The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.
For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.
To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.
How does it work?
For every DOM object, there is a corresponding virtual DOM object(copy), which has the same properties.
The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. Consider a virtual DOM object as a blueprint of the real DOM object.
Whenever a JSX element gets rendered, every virtual DOM object gets updated.
**Note- One may think updating every virtual DOM object might be inefficient, but that’s not the case. Updating the virtual DOM is much faster than updating the real DOM since we are just updating the blueprint of the real DOM.
React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.
Whenever the virtual DOM gets updated, react compares the two virtual DOMs and gets to know about which virtual DOM objects were updated.
After knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM.
This way, with the use of virtual DOM, react solves the problem of inefficient updating.
6. What are the different lifecycle methods in React?
Every component in React has lifecycle methods that we can tap into, to trigger changes at a particular phase of the life cycle.
Each component in react goes through three phases: Mounting, Updating, and Unmounting.
There are corresponding lifecycle methods for each of the three phases:
**Note- In this article, we are discussing the use of lifecycle methods in class components. For utilising lifecycle methods in functional components, react hooks are used.
