React JS Interview Questions and Answers

    0 Votes

Top 45 React JS Interview Questions and answers for freshers and experienced programmers covering all aspects of React JS.

1) What is React JS?

React JS is a java script library developed by Facebook for UI building. React JS allows to create a reusable component in UI. This is one of the popular java script libraries which has a large community behind it.

2) What are the advantages of using React JS?
  • Below are some of the advantages of React JS –
  • React JS is an isomorphic library, which can be used in client and server side.
  • React JS components can be re-used.
  • React JS uses virtual DOM, this will improve the performance of the page as any update to the DOM not directly updated to the main DOM instead it will be updated to virtual DOM.
3) What are the limitations of React JS?
Below are some of the limitations of React JS –
  • React JS library is large.
  • React JS can be used only in view layer of the MVC frameworks.
  • React JS uses JSX for development.

 

4) What are the differences between AngularJS and React JS?

Below are some of the differences between AngularJS and React JS –

AngularJSReact JS
Developed by Google Developed by Facebook
MVC framework Just a JavaScript library
Uses Regular DOM Uses Virtual DOM
Uses View, Model and Controller Mainly uses components
Full MVC Used only in view layer
Not fast as React JS Fast

5) How to render the JSX code in browsers?

By default, browsers do not render the JSX code. If any java script file contains JSX code, it should be compiled before rendering it to the browser.

6) What are the main features of React JS?

  • React JS uses a concept called Virtual DOM (VDOM) which will increase the performance of the application UI.
  • React Native support is provided to give the native feel for Android, IOS etc.

7) React JS supports unidirectional or bidirectional flow?

React JS supports unidirectional data flow.

8) How does unidirectional data flow works?

Data to the child components are passed from the parent component using properties to the child components. If child components want to communicate with the parent component, it should be through events.

9) What is Virtual DOM in React JS?

A lightweight copy of the actual DOM is maintained in the Virtual DOM. When something got updated in the HTML, instead of rendering the whole DOM, virtual DOM got re rendered and react checks the difference in virtual DOM and actual DOM and the difference gets updated to the actual DOM.

10) What is the meaning of Virtual DOM diffing?

When component is re-rendered, Virtual DOM checks what are the elements got changed and update the changed elements to the actual DOM. The process of checking the changed element here is called Virtual DOM diffing.

11) What is Component in React JS?

Components will let us split the UI to reusable and independent pieces. Components are like java script functions.

function MyComponent(myprops) {
  return ;
}

12) What is State in React JS?

State is used in React JS to handle the data change. It is nothing but java script object which leaves inside the component. Whenever the state changes in the Component it will render the HTML content in virtual DOM and changed HTML elements will be updated to the actual DOM.

13) How to use a State in React JS?

In the constructor of Component initialize the State and when the value need to be changed for the State, use the method – “setState()”. Below is the sample code to set the State -

class HelloWorld from React.Component {
   constructor(props) {
    super(props);
    this.state = {mycounter: 0 };
  }

  Button_Click() {
    this.setState({mycounter: this.state.mycounter + 1});
  }
  render() {
    return (
      <div>
        <div>count:{this.state.mycounter}</div>
        <button onClick={this.Button_Click}>click Me</button>
      </div>
    );
  }
}; ReactDOM.render(, document.getElementById("root"));

14) What is Props in React JS?

Props are properties for Components and it’s like arguments for functions. We are mainly using Props to pass the data from parent to child Components. Props in a Component cannot be modified (its immutable).

var MyTest = React.createClass({
  render: function() {
    return <div>Hello {this.props.text}</div>;
  }

});
ReactDOM.render(
  <MyTest text="Hi" />,
  document.getElementById('root')
);
Page 1 of 3

Popular Videos

communication

How to improve your Interview, Salary Negotiation, Communication & Presentation Skills.

Got a tip or Question?
Let us know

Related Articles

HTML/HTML5 Interview Questions and Answers
JQuery Interview Questions and Answers
Javascript Interview Questions and Answers
Top AngularJS Questions and Answers
Top 60+ Node.JS Interview Questions and answers
Top 70 CSS Interview Questions and Answers