Q1). Define ReactJs and Its features.
ReactJs is a front-end JavaScript library and provides a component-based approach that helps designers to build reusable components. React has following listed features:
- React uses virtual DOM rather than real DOM,
- React uses Server-side rendering,
- Uni-directional data flow or data binding is used in React.
Q2). Why should we use React, tell its advantages too?
React is one of the most used libraries and has following listed advantageous features:
- Application performance is increased by React
- It can be used on client and server side
- Code readability is increased due to JSX
- The user can easily integrate React with other frameworks like Angular, Meteor, etc.
- UI test cases can be easily written by using React
Q3). Enlist React limitations if you know any?
Though React is a popular tool but has some limitations that are listed below:
- React is not a framework but a set of libraries.
- Designers take time to understand this library as it is very large in size
- For novice programmers, it can be difficult to understand this library
- Inline templating and JSX makes the coding somewhat complex
Q4). Explain Virtual DOM of React and how does it work?
Virtual DOM is nothing but it is just a copy of real DOM. In the node tree of Virtual DOM, all elements, attributes, and content are listed as objects and its properties. Through render function, a node tree is created by the React components. After mutation, the tree gets updated and it may happen due to system user’s action.
Q5). What is the difference between Real and Virtual DOM?
| Real DOM | Virtual DOM |
| It can directly update the HTML | It cannot update HTML directly |
| Manipulation in Real DOM is much expensive | DOM manipulation is quite easier |
| Update is slower | Update is faster |
| Memory wastage is higher | Memory is not wasted |
| A new DOM is created when elements are updated | JSX is updated when an update happens |
Q6). What is JSX in React? Explain with example and proper syntax?
JSX stands for JavaScript XML, it is just a file that is used by React and is written in JavaScript and HTML. Due to this HTML file becomes easy to understand and applications become robust and their performance is increased. Below syntax is used by this file:
Render () {
return (
<div>
<H1> Hello World!!!!</H1>
</div>
);
}
Q7). Why Can Browsers not read JSX?
JSX is not purely JavaScript objects and browsers can only read JavaScript objects. So, if we want that a JSX file must be read by the browser then we will have to convert it into a JavaScript object and for that, we will have to use JSX transformers like pass or Babel and then it will be passed to the browser.
Q8). What is render () in React and why is it used?
Each component of React needs to be rendered by using render () function. To group more than one HTML element we can use <form>, <group>, <div> etc. It then returns to single react element that represents native DOM component. This function of render must return the same result whenever it has been invoked.
Q9). Differentiate between React and Angular.
React and Angular are two of the most popular libraries for JavaScript and let us have a quick look at differences between them:
- Angular can implement complete MVC, while through React we can only implement View of MVC.
- Angular provides client-side rendering while React provide server-side rendering.
- Angular can provide two-way data binding while React can provide only one-way data binding.
- Angular is provided by the Google and React is provided by the Facebook.
- Angular uses run-time debugging and React uses compile-time debugging.
- Angular uses Real Dom while React uses virtual DOM.
Q10). What is the meaning of the statement “In React, everything is component”?
The building blocks of the React application UI are called components. Entire UI is divided into several components that are smaller in size and are reusable as well. Then each of these components is rendered independently without affecting rest of the UI.
ReactJS Interview Questions with Answers for Experienced
Q11). Define Props.
In React, Props is used for Properties. These are immutable components of React that have to be kept pure. These components are always passed to the child components from parent components and cannot be sent back to the parent component. It makes the data-flow unidirectional and dynamically generated data is rendered through this concept.
Q12). Define State in React and the way it is used in React.
States are basically data source in React and are kept as simple as possible. Through states, the rendering and behavior of the components are identified. Unlike props, they are mutable and can be used to create interactive and dynamic components. Usually, this.state() function is used to access them.
Q13). Compare props and state.
Following are a few noticeable points for a quick comparison of prop and state:
- Both Props and State receive initial value from the parent component
- In State, the parent component can change the value, while in case of props it is not so.
- Default values can be set in both state and prop
- Components can be changed from inside in case of State while this cannot be done in Props
- The initial value can be set for child component in both of the cases
Q14). What is the way to embed two or more components?
class newComponent extends React.Component{
render(){
return(
<div>
<h1>Welcome</h1>
<Header/></div>
); } }
class Header extends React.Componet{
Render(){return (Header Component </h1>
); } }
ReactDOM.render(<newComponent/>, document.getElementById(‘content’));
Q15). How can the component state be updated?
For this, we can use this.setState() function in the following way:
Class newComponent extends React.Component{
Constructor(){
Super();
This.state={name: ‘Maxx’, id: ‘101’} }
Render()
{setTimeout(()=>{this.setState({name:’Denis’, id:’222’})},2000)
Return(
<div>
Welcome {this.state,name}
What is id {this.state.id}
</div>
);}}
ReatDOM.render(<newComponent/>, document.getElementById(‘content’)
Q16). Compare stateful and stateless components.
Following are the main considerable differences between stateful and stateless components:
- In both cases, the information about the change of states of the component is stored
- Stateless components have the authority to change the sate while stateful components do not have such authority
- Stateless components store the information about past, present, and future states, while stateful components do not store such information about the components.
Q17). What are the phases of the lifecycle of React’s component?
In the lifecycle of React’s component, there are following three phases:
- Initial Phase: Initial phase is the phase when the components start the journey of their life to make their way to DOM
- Updating Phase: At the time when components are added to DOM and update and rendered when a state or prop changes occur.
- Unmounting Phase: This is called final phase of the component in which the component gets destroyed.
Q18). What are the methods of React component lifecycle?
In the entire lifecycle of a React component, the following methods are used to accomplish the functions:
- componentWillMount() – On client and server side this function gets executed just before the rendering
- componentDidMount() – After first render it gets executed on the client side
- componentWillReceiveProps() – This function is invoked when the props are received from the parent class and another render is not being called.
- shouldComponentUpdate() – This Boolean function returns true or false as per situation like if the component needs to be updated then true is returned else false is returned
- thecomponentWillUpdate() – It is called when rendering is not being called
- componentDidUpdate() – It is called just after when render function is called
- componentwillUnmount() – When a component gets un-mounted from DOM then this function is called
Conclusion
The number of questions that can be asked to any fresher or experienced ReactJS professionals. Other commonly asked concepts and terms are Redux, an event of React, HOC, Pure component, keys in React, Reducer and many more. One must keep updating his knowledge to qualify the interview. We at JanBask Training have prepared the list of questions carefully and answered each of the questions after careful observation only.
We wish you luck for your next interview! Happy Job Hunting!
