React js Interview Questions

React js Interview questions Download React js Interview questions PDF

React js Interview questions

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

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

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

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
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.
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}

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;