React JS Interview Questions and Answers

React JS Interview Questions and Answers

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 –

AngularJS React 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')
);

15) How to update the State of the Component in React JS?

Use method –setState() to update the State of the Component.
16) What is Controllable Component and Uncontrollable Component in React JS?
Controllable Component – Controllable Component is the one which takes the value through Props and changes are notified to the parent Component through callbacks. Parent Component controls this Component either by passing the data and handling the callbacks and managing its own state.

Uncontrollable Component – Uncontrollable Component is the one which stores its own state internally.

17) What are the Component Life Cycle methods in React JS?
Below are some of the methods in Component Life Cycle –
  • constructor()
  • componentWillMount()
  • componentDidMount()
  • render()
  • componentWillUpdate()
  • componentDidUpdate()
  • componentWillUnMount()
18) What are the methods called when Component is created or while inserting it to DOM?
Below are the methods called when the Component is created or inserted to DOM –
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

19) What are the methods called when State or Props of the Component is changed?

Below are the methods called when State or Props of the Component is changed –

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

20) How to access the Props inside the Component passed from the parent Component?

Use this.Props.PropName

21) How to use Props and State together in Component in React JS?

First set a State in constructor in a Component –

constructor(){
    //set the state here.
this.state.Name = “John”;
}
Use the State as Props while passing to the child Components –
render(){
    return (
      <div>
          <Child name = {this.state.Name} />
</div> 
)    
}

In child Component access this as – this.props.name

22) How to handle the event in React JS?

Handling events is like handling events on DOM elements.

Below are some of the differences –

  • Events in React JS should be named in camel casing and not in lower case. Eg: myClick()
  • In JSX, function can be passed as an event handler and not as a string.

23) How to get the value when the event is fired in React JS?

Consider the we have an event called – “onChange(e)”, we can get the value from the element like below –

onChange(e){
    var test = e.target.value;
    this.setState(test);	
}

24) What is JSX?

When React JS was introduced by Facebook they have introduced a new dialect of JS called JSX, which embeds HTML templates in java script code.

25) How to render the JSX in web browser?

JSX cannot be directly rendered in the browser. We need to use the compilers to build the traditional java script and render it in the browser. Compilers can be used are Babel, TypeScript, Web Pack etc.

26) What is Flux?

Flux is an architectural pattern introduced by Facebook to support unidirectional data flow in React application.

27) What are the components in Flux architecture?

Below are the components in Flux architecture –

  • Action
  • Dispatcher
  • Store
  • View

28) What are the issues with the MVC Pattern?

MVC (Model, View, Controller) pattern is accepted universally for separation of concerns. But web developers are complaining about the limitations of the growing size of the application.
  • MVC is identified to be causing below issues –
  • Lack of data Integrity – Model data can be mutated from any place which could result in wrong predications.

Poorly defined data flow – Cascading updates which occurs in views can lead to nightmare to debug.

29) What are the popular libraries used for Flux?
Below are the popular libraries used for Flux –
  • Redux
  • Reflux
  • Alt
30) What is the meaning of Stateless Components?
Stateless Components are pure functions which will render the DOM based on the props provided. These Components are reusable Components.
31) Explain Flux Architecture Pattern?
In Flux Architecture Pattern, Store is authorized for all the data, any data changes must happen in Store. When the data changes in Store, Store will broadcast to subscribed Views. Views will update the new data with the change of State.

When the user inputs any data, Actions are fired and these Actions are handled by Dispatcher. Dispatcher picks up the Stores which registered events for this Action. Thus, it will have unidirectional data flow.

32) How to render the Components conditionally?

Rendering of the Components can be done conditionally and it works same as java script.

Eg: In the below code snippet, ‘if’ operator is used to render the Component.

function TestComponent(props) {
  return <h1>Hello !</h1>;
}

function ParentComponent(props) {
  const isDisplay = props.isDisplay;
  if (isDisplay) {
    return <TestComponent />;
  }
}

ReactDOM.render(
  <ParentComponent isDisplay={false} />,
  document.getElementById('root')
);

33) What is the difference between “setState()” and “forceUpdate()” methods in React JS?

setState() – This method is called inside the Component to set the value to the State. Once this method is called, Component is rendered and Component life cycle is invoked.

forceUpdate() – This method is used to forcefully render the Component which is not suggested in most of the cases.

34) Why to use Keys in React JS?

Keys are used to identify which are the items got changed/removed/added in the list of items.

Keys will be assigned to the elements in an array.

35) Which module is used for routing in React JS?

react-router need to be installed for the routing in React JS.

36) How to export a component in React JS?

We can use “export” keyword to export the Component if the Component need to make it as default then add the keyword called – “default”.

Eg: export default myComponent

37) What is the meaning of Pure Functional Components?

Pure Functional Components are those which does not have State defined for the Component.

38) What are the three stages of Component Life Cycle in React JS?

Below are the 3 Stages of Component Life Cycle –

  • Mounting
  • Updating
  • Unmounting

39) Why to use methods – “ComponentWillReceiveProps” and “ShouldComponentUpdate” in React JS?

ComponentWillReceiveProps – This method is invoked when the value of the Prop is updated before another render.

ShouldComponentUpdate – This method will return either true or false value. This determines whether a component should be updated or not. Default value is set to true.

40) Which method is used to set the initial State in the constructor?

Initial State of the Component can be set using method – “getInitialState()”, this will be called while Component is rendered initially. For ES6 Classes, getInitialState() has been deprecated in favor of declaring an initial state object in the constructor.

41) What are Refs in React JS?

Ref is used to return the reference to our element. Refs should be avoided but they are useful when adding the methods to Components.

42) What you mean by Synthetic Events in React JS?

To ensure the events have consistent properties for different browsers, react will wrap the browser’s native events to “synthetic events”, consolidating browser behaviors into one API. Synthetic events are a wrapper around the browser’s native event system for cross browser.

43) How Routing works in React JS?

Routing is based on the URL in the browser. Based on the URL, different Components are loaded.

44) List out the differences between State and Props in React JS?

Props – Passed through the parent Component with the data and it is consumed in the Component.

Eg: <MyComponent name =” TestName” />

State – State is maintained by Component itself. “getInitialState()” and “setState()” methods are used to get the initial and set the State respectively.

Eg: this.setState({ key: value})

45) What is the difference between “setState” and “replaceState” in React JS?

  • setState – In this previous and current States are merged.
  • replaceState – This will throw the current State and replaces with whatever given.

46) What is Redux?

Redux has in fact no relation with the React. It is just a library to support Flux pattern. We can write Redux apps with React or Ember or Angular.

Search Terms
react js interview questions and answers
react js interview questions and answers pdf
reactjs interview questions and answers for experienced pdf
react js interview questions and answers for experienced
interview questions and answers on reactjs

Related posts

Leave a Comment