React js Interview Questions

React js Interview questions

Reactjs is an open source javascript UI(User Interface) library, collaborate and maintained by Facebook and Instagram and also a huge community of developers. That's designed to take your application state and allow you to write code that makes that status input and return virtual DOM, It's certainly better way to manipulate the DOM and handle events which are really just a set of plain.

Every brand wants to build an interactive UI for its mobile users as it engages them for a longer period and results in more conversions. Thus, brands pick the best talent from the developer community and offer them attractive packages. In case you are a developer who is willing to join the industry, here are a few React.js interview questions that answers about all the major elements of React Js. In this post, we have added some Basic and Advanced React Js Interview Questions.

Thus, these questions are compiled with both basic and advanced level questions on React Js. Preparing for your interview with these questions, will give you an edge over the others and will help you crack the exam.

Download React js Interview questions PDF

React js Interview questions

In React ref is used to store the reference of element or component returned by the component render() configuration function.Refs should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components.

Refs can be used in the following cases

  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

Refs are used for managing focus, selecting text and triggering animations. It also integrates with third-party libraries. Refs help in getting the reference to a DOM (Document Object Model) node. They return the node that we are referencing. Whenever we need DOM measurements, we can use refs.

Flux is an application architecture for creating data layers in JavaScript applications.It was designed at Facebook along with the React view library.Flux is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.
further reading https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
Using Events is React js is very similar to handling event on DOM elements.The difference is only in syntax like.
  1. The name of event is React js is always in camelCase.
  2. With JSX you pass a function as the event handler, rather than a string.

Lets understand by an example:

// In HTML
<button onclick="activateAccount()">
  Activate Account
</button>
//In React
<button onClick={activateAccount}>
  Activate Account
</button>

Another difference is that in React js you cannot return false to prevent default behavior in React. You must call preventDefault explicitly. Read more from https://facebook.github.io/react/docs/handling-events.html

Undoubtedly today React is among of one the best JavaScript UI frameworks. It comes with a lot of features that helps programmers to create beautiful application easily, we have listed some of them below.
  • It’s Adaptability
  • Free and Open Source
  • Decorators from ES7
  • Server-side Communication
  • Asynchronous Functions & Generators
  • Flux Library
  • Destructuring Assignments
  • Usefulness of JSX

Also, Read React Native Interview questions

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

By using JSX one can write the following JSX/JavaScript code:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</li>
      <li><a href="#">About

<li><a href=”#”>Clients

<li><a href=”#”>Contact Us

</ul> );

And Babel will transform it into this:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

source:https://www.reactenlightenment.com/react-jsx/5.1.html

Props are shorthand for properties.they are very similar to an argument is passed to a pure javascript function. Props of the component are passed from parent component which invokes component. During a component’s life cycle props should not change consider them as immutable.In React all props can be accessible with this.props.
import React from 'react';
class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}
const element = ;

State are used to create dynamic and interactive components in React.State is heart of react component that makes it alive and determines how a component renders & behaves.

// simple state example 
import React from 'react';
class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

export default Button;
DOM is the acronym for Document Object Model. Dom is also called HTML DOM as it is an abstraction of structured code called HTML for web developers. Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a  structure where users can create, alter, modify documents and the content present in it. So while HTML is a text, DOM is an in-memory representation of this text.

Virtual DOM is an abstraction of abstraction as it has been derived from HTML DOM. It is a representation of DOM objects like a lightweight copy. The virtual DOM was not invented by React, it is only used and provided for free.

React JS Component Lifecycle

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-

rendered:

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

Unmounting

This method is called when a component is being removed from the DOM:

  • componentWillUnmount()

Other APIs

Each component also provides some other APIs:

  • setState()
  • forceUpdate()

Class Properties

  • defaultProps
  • displayName

Instance Properties

  • props
  • state

Source: https://facebook.github.io/react/docs/react-component.html

SyntheticEvent is a cross-browser wrapper around browser’s native event. In React all of your event handlers will be passed instances of SyntheticEvent.The synthetic event works the same way as the event system of browsers, the only difference is that the same code will work across all browsers.

Below is a simple example of how to listen for a click event in react

import React, { Component } from 'react';
 
class ShowAlert extends Component {
  
  showAlert() {
    alert("Im an alert");
  }
 
  render() {
    return (
      <button onClick={this.showAlert}>show alert </button>
    );
  }
}
 
export default ShowAlert;
React Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Below is ample component written in ES6 class to display a welcome message on the screen.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name} </h1>;
  }
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

source: https://facebook.github.io/react/docs/components-and-props.html

React js is javascript based UI Library developed at Facebook, to create an interactive, stateful & reusable UI components. It is one of the most popular javascript frameworks that is created for handling the presentation layer for the web and mobile apps.

render() function is used to update the UI. For this, you have to create a new element and send it to ReactDOM.render(). React elements are immutable and once you create an element, you cannot change its attributes. Thus, elements are like a single frame and it depicts the UI at some point. ReactDOM.render() controls the content of the container node you pass and if there is any DOM element already present in it then it would be replaced when first called.

Difference Between FLUX and Redux

FLUXREDUX
Flux is a container for application state and logic that are registered to callbacks.Redux is a container for JavaScript apps.
It is an observer pattern that is modified to fit React.It offers interesting features such as writing applications, testing in different environments such as a server, client, etc.
It is a fancy name given to observer pattern and Facebook has developed tools to aid the implementation of these patterns.In redux, actions can be functions or promises.
Flux supports actions that are simple JavaScript objects.Redux is the first choice for web developers because it offers live code editing.
Stateless components are components that don’t have any state. When something is stateless, it calculates its internal state but it never directly mutates it.For creating a stateless components No class and this keyword is needed.You can create a stateless components using plain functions or Es6 arrow function. Below is an example of stateless component in react.
//In Es6 
const Pane = (props) =>
{props.children}

;

//In Es5 
const Username = ({ username }) =>

The logged in user is: {username}