Top asked interview questions | React JS developer interview guide

React JS is the most popular JavaScript library. More than 30% of developers are using this technology. Some of the most popular companies like - PayPal, Netflixude, Airbnb, Facebook, udemy and many are using react js to develop front-end for their website. The average salary for react js developers in India is 100000 INR per annum (6LPA-16LPA) and $120000 per year in the USA.

How to prepare for react JS interview

First of all, learn JavaScript. For a react JS developer interview, more than 50% of questions come from javaScript. So learn all fundamentals, data types, dom manipulation, ES6.

Create some react JS projects to showcase to your interviewer, learn all react JS fundamentals, why react JS is better than other JS frameworks, create your portfolio, and list your projects. As a front-end developer, You should have good knowledge of HTML, CSS, and other UI frameworks. You can also learn webpack so that you can create optimized build for your website.

Most asked React JS interview questions

1. What is react JS?

React is a JavaScript library that is used for building user interfaces and single-page applications. React was created by Jordan Walke, software engineer of Facebook in 2013.

2. What are the main features of react Js?

• It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
• Supports SSR (server-side rendering).
• It Follows unidirectional data flow.
• Uses reusable UI components.

3. How can create a class component?

import React from 'React'

class MyComponent extends React.component {
  render() {
    return <div>Hello world!</div>
  }
}

export default MyComponent

4. How can create a functional component?

import React from 'React'

const MyComponent = ({ name }) => <div>Hello {name}</div>

export default MyComponent

5. What is JSX?

JSX stands for JavaScript-XML. By using jsx, we can write HTML in React.

class MyComponent extends React.component {
  render() {
    return <div>Hello {this.props.name}!</div>
  }
}

export default MyComponent

6. What is State?

A state is an object that holds values of components. It is mutable.

class MyComponent extends React.component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Gyanendra Knojiya',
    }
  }
  render() {
    return <div>Hello {this.state.name}!</div>
  }
}

export default MyComponent

7. What are props?

Props are the properties that pass to the component. It is like input to components that are given from the parent component to the child component.

<MyComponent name={'Gyanendra Knojiya'} />

8. Why do we use callbacks with setState()?

setState() is asynchronous in nature. So callback function gets called when the state update is completed.

setState({ name: 'Gyanendra Knojiya' }, () => console.log(`Hello ${this.state.name}!`))

9. Why do we use the "Key" prop when mapping an Array?

Key helps react to differentiate mapped components and react able to which component is getting changed. So that key props always should be unique.

;['sunday', 'monday', 'tuesday'].map((day, index) => <li key={index}>{day}</li>)

10. What is Virtual DOM?

Virtual DOM is a memory representation of real-dom. Virtual is always in sync with real dom by using a library such as ReactDOM. This process is called reconciliation.