If you are an aspiring front-end developer and are preparing for an interview, this article is for you. This article has collected the most common interview questions you might ask during a React interview. It’s an ideal guide to prepare you for a React interview.

React

React Redux, React Redux, and React Routing. [Click here to receive interview question materials]

React Components

What is the virtual DOM?

The virtual DOM (VDOM) is an in-memory representation of the real DOM. The REPRESENTATION of the UI is kept in memory and synchronized with the actual DOM. This is a step that takes place between the rendering function being called and the element being displayed on the screen, and the whole process is called reconciliation.

2. What is React?
  • React is a front-end JavaScript library developed by Facebook in 2011.
  • It follows a component-based approach to building reusable UI components.
  • It is used to develop complex and interactive Web and mobile UIs.
  • Although it only became open source in 2015, there is a large support community.
3. What is the difference between a class component and a function component?
  • Class components can use other features, such as state States and lifecycle hooks.
  • A stateless component is a functional component when it simply receives props rendering to the page. It is also called a dumb component or presentation component.

Of course, there is a difference between a function component and a class component, and the performance of a function component is higher than that of a class component, because a class component is instantiated when it is used, whereas a function component simply executes the function and returns the result. To improve performance, use functional components whenever possible.

4. How do you handle events in React

To address cross-browser compatibility issues, SyntheticEvent instances will be passed to your event handlers. SyntheticEvent is the React cross-browser browser native event wrapper and has the same interface as browser native events. This includes stopPropagation() and preventDefault().

Interestingly, React doesn’t actually attach events to the child nodes themselves. React uses a single event listener to listen for all events at the top level. This is good for performance and means React doesn’t need to track event listeners when updating the DOM.

5. How to create refs

Refs are created using react.createref () and attached to the React element via the ref attribute. When components are constructed, Refs are typically assigned to instance properties so that they can be referenced throughout the component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
 	return <p ref={this.myRef}  />; }}Copy the code

Or use it this way:

class UserForm extends Component {
  handleSubmit = () = > {
    console.log("Input Value is: ".this.input.value)
  }
  render () {
    return (
    <form onSubmit={this.handleSubmit}>
    <input
          type='text'
          ref={(input)= > this.input = input} /> // Access DOM input in handle submit
      <button type='submit'>Submit</button>
      </form>)}}Copy the code
6. What are higher-order components?

HOC is a function that takes a component and returns a new one. Basically, this is a pattern derived from the composite features of React, calling them pure components because they can accept any dynamically supplied subcomponents without modifying or copying any behavior in the input components.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Copy the code

HOC can be used in many of the following use cases

  • Code reuse, logic, and bootstrap abstraction
  • Rendering hijacked
  • State abstractions and operations
  • Props to deal with
7. List the main advantages of React.

Some of the main advantages of React are:

  • It improves application performance
  • It can be easily used on both client and server sides
  • Thanks to JSX, the code is very readable
  • React is easy to integrate with Meteor, Angular, and other frameworks
  • With React, writing UI test cases becomes very easy
8. What are the restrictions on React?

React has the following restrictions:

  • React is just a library, not a complete framework
  • Its library is huge and it takes time to understand
  • It can be difficult for novice programmers to understand
  • Coding gets complicated because it uses inline templates and JSX
9. What is JSX?

JSX is short for JavaScript XML. React is a file used by React that takes advantage of the expressiveness of JavaScript and htML-like template syntax. This makes HTML files very easy to understand. This file can make your application very reliable and improve its performance. Here is an example of JSX:

render(){
 return(
 <div>
 <h1> Hello World from Edureka!!</h1>
 </div>
 );
}
Copy the code
10. Why can’t browsers read JSX?

Browsers can only process JavaScript objects, not read JSX in regular JavaScript objects. So in order for the browser to be able to read JSX, you first need to convert JSX files into JavaScript objects using JSX converters like Babel, and then pass them to the browser.

11. How is the React ES6 syntax different from ES5?

The following syntax is the difference between ES5 and ES6:

1) require and import

// ES5
var React = require('react');

// ES6
import React from 'react';
Copy the code

2) Export and exports

// ES5
module.exports = Component;

// ES6
export default Component;
Copy the code

3) Component and function

// ES5
var MyComponent = React.createClass({
 render: function() {
 return
 <h3>Hello Edureka!</h3>; }});// ES6
class MyComponent extends React.Component {
 render() {
 return
 <h3>Hello Edureka!</h3>; }}Copy the code

4) props

// ES5
var App = React.createClass({
 propTypes: { name: React.PropTypes.string },
 render: function() {
 return
 <h3>Hello, {this.props.name}!</h3>; }});// ES6
class App extends React.Component {
 render() {
 return
 <h3>Hello, {this.props.name}!</h3>; }}Copy the code

5) the state

// ES5
var App = React.createClass({
 getInitialState: function() {
 return { name: 'world' };
 },
 render: function() {
 return
 <h3>Hello, {this.state.name}!</h3>; }});// ES6
class App extends React.Component {
 constructor() {
 super(a);this.state = { name: 'world' };
 }
 render() {
 return
 <h3>Hello, {this.state.name}!</h3>; }}Copy the code
12.React is different from Angular?

13. What is a control component?

In HTML, form elements such as ,

React works differently. The component that contains the form tracks the input value in its state and rerenders the component every time a callback function (such as onChange) fires, as the state is updated. The input form elements whose values are controlled by React in this way are called controlled components.

14. How to React. CreateElement?

Question:

const element = (
<h1 className="h=greeting">
    Hello, world!
    </h1>
)
Copy the code

This code is implemented using react. createElement:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world! '
);
Copy the code
15. What are the different phases of the React component lifecycle?

There are four distinct phases in the component lifecycle:

Initialization: During this phase, the component is ready to set its Initialization state and default properties.

Mounting: The React component is ready to mount to the browser DOM. This phase includes the componentWillMount and componentDidMount lifecycle methods.

Updating: During this phase, the component is updated in two ways, sending the new props and state. This phase includes shouldComponentUpdate, componentWillUpdate, and componentDidUpdate lifecycle methods.

Unmounting: At this stage, the component is no longer needed and is unmounted from the browser DOM. This phase contains the componentWillUnmount lifecycle method.

In addition to the four common life cycles above, there is another error-handling phase:

Error Handling: At this stage, this component is invoked whether an Error occurs during rendering, in a lifecycle method, or in the constructor of any child component. This phase contains the componentDidCatch lifecycle method.

16. What’s wrong with this code?
this.setState((prevState, props) = > {
  return {
    streak: prevState.streak + props.count
  }
})
Copy the code

The answer:

There is no problem. This is rarely used. We can pass a function to setState that takes the value of the previous state and the current props and returns a new state. This is recommended if we need to reset the state based on the previous state.

17. How do I conditionally add properties to the React component?

React is smart enough to omit certain properties if the value passed to it is imaginary. Such as:

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;
      return (

       <input type="text" disabled={disabled} reqyired={reqyired} />); }});Copy the code

Render result:

 <input type="text" reqyired>
Copy the code

Another possible approach is:

var condition = true;

var component = (
<p
    value="foo"
    { .( condition && { disabled: true})} / >
);
Copy the code
React Performance optimization solution
  • rewriteshouldComponentUpdateTo avoid unnecessarydomoperation
  • useproductionVersion of thereact.js
  • usekeyTo helpReactIdentify minimal changes to all subcomponents in the list

Redux

  1. What are the main problems with the MVC framework?

  2. Explain Flux

  3. What is a Redux?

  4. What are the three principles Redux follows?

  5. What do you mean by “single source of fact”?

  6. List the components of Redux.

  7. How does data flow through Redux?

  8. How do I define actions in Redux?

  9. Explain the role of Reducer.

  10. What does Store mean in Redux?

  11. How is Redux different from Flux?

  12. What are the benefits of Redux?

The React routing

31. What is the React route?

React Router V4 uses the switch keyword.

33. Why route in React?

34. List the advantages of the React Router.

35. How is a React Router different from a regular route?

Need can click here for free, also includes JavaScript interview questions document, Vue interview questions document, big factory interview questions document, can get free!