ReactJS Interview Questions and Answers

 React is also known as React.js or ReactJS .React is a declarative, efficient, and flexible JavaScript library for building user interfaces (UI). React is a JavaScript library created by a collaboration of Facebook and Instagram. It allows developers to create fast user interfaces.

ReactJS is used to handle the view part of Mobile application and Web application.

ReactJS component is simply a JavaScript class with a render () method that returns a description of the component’s UI, like so:

Class Hello extends React.Component {

    render () {

        return (

            <h1>Hello World</h1>

        )

  }

}

Output: Hello World

What are the feature of ReactJS?

• It’s Adaptability
• Free and Open Source
• Architecture beyond HTML
• JSX (JavaScript Extension)
• React Native
• Single-Way data flow
• Virtual Document Object Model
• Decorators from ES7
• Server-side Communication
• Asynchronous Functions & Generators
• Flux Library
• Destructuring Assignments

JSX((JavaScript XML) ) 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. It is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces.

After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. JSX is always faster as it performs optimization while compiling code to vanilla JavaScript. JSX is also type-safe, means it is strictly typed and most of the errors can be caught during compilation of the JSX code to JavaScript.

JSX code cannot be read by any of the browsers because it embeds XML-like and HTML templates inside the JavaScript code. It cannot readable by the browsers unless it is converted into original JavaScript format. There are tools available to convert JSX into original JavaScript format. Ex: Web pack, Babel.

• ReactJS only responsibility is to build compostable and reactive user interfaces. The power of this tool comes from its simplicity. Learning curve of React is very low, so any new developer coming to project based on React, had no problems with jumping in.
• ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications
• Anyone with a basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as ‘DSL, implying that it is difficult to learn them. For react you just need basic knowledge of CSS and HTML.
• It can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time we can make IOS, Android and Web application.
• It is used one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It’s easier to debug self-contained components of large ReactJS apps.
• React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.
• ReactJS applications are easy to testing.

DOM stands for Document Object Model. It’s a way of representing a structured document via objects. It is cross-platform and language-independent convention for representing and interacting with data in HTML, XML, and others. Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS.

We can search for nodes and change their details, remove one and insert a new one. The main disadvantage of DOM is it cannot be useful for creating dynamic user interfaces due to heavy weighable parts.

Virtual DOM is React’s Object that represent the Browsers DOM, which is intelligent to make changes in the DOM with the help of Different Algorithm. (Or) The virtual DOM is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the real DOM by a library such as React DOM. This process is called reconciliation.

Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM.

Advantages:

• ReactJS is very simple
• js uses a special syntax called JSX, which allows you to mix HTML with JavaScript.
• js can be used both on client side scripting and server side scripting.
• It can be used on any framework like Backbone.js, Angular.js etc.
• In React, JavaScript virtual DOM is faster than the regular DOM.
• Its Component and data pattern improve readability.

Disadvantages:

• js is only a view layer
• Too large library
• Learning curve for ReactJS may be steep.

 In ReactJS, State is a place from where the required comes. The main considerable thing while dealing with state is we need to keep it as simple as possible to minimize number of stateful components.

Flux is a programming concept, where the data is unidirectional. Flux is an architecture for creating data layers in JavaScript applications. It was designed at Facebook along with the React view library. It places a focus on creating explicit and understandable update paths for your application’s data, which makes tracing changes during development simpler and makes bugs easier to track down and fix.

Some of the major problems with MVC framework:

• In MVC, Applications were slow and inefficient
• DOM manipulation was very expensive
• There was huge memory wastage
• Because of circular dependencies, complicated model was created around models and views

In ReactJS, Redux is a predictable state container for JavaScript apps.Redux is a tool for managing both data-state and UI-state in JavaScript applications. It’s ideal for Single Page Applications (SPAs) where managing state over time can be complex. It’s also framework-agnostic, so while it was written with React in mind, it can even be used with Angular or a jQuery application.

Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data.

Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depend solely on the values of their arguments.

 Ref:  ref is used to return a reference to your element. Refs should be avoided in most cases but they can be useful when you need DOM measurements or to add methods to your components.

 Key: React keys are useful when working with dynamically created components or when your lists are altered by users. Setting the key value will keep your components uniquely identified after the change.

React Component is a independent, reusable code and it contains HTML + JavaScript. Components data will be stored in component’s State. This state can be modified based on user action or other action. When component state is changed React will re-render the component to the browser. you must implement render method when creating component.

React.PureComponent is one of the most significant ways to optimize React applications that is easy and fast to implement. The usage of React.PureComponent gives a considerable increase in performance because it reduces the number of render operation in the application.

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wraps another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Some important lifecycle methods are:

ComponentWillMount (): It is executed just before rendering takes place both on the client as well as server-side.

ComponentDidMount (): It is executed on the client side only after the first render.

ComponentWillReceiveProps (): It is invoked as soon as the props are received from the parent class and before another render is called.

ShouldComponentUpdate (): It is returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.

ComponentWillUpdate (): It is called just before rendering takes place in the DOM.

ComponentDidUpdate (): It is called immediately after rendering takes place.

ComponentWillUnmount (): It is called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

Props are similar to arguments for pure functions argument. Props of component are passed from parent component which invokes component. Props in a component cannot be modified (Immutable). Props are short hand for Properties in React. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

In ReactJS, Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.

A controlled component is a component where React is in control and is the single source of truth for the form data. Here, username doesn’t live in the DOM but instead lives in our component state.

An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.

CreateElement: CreateElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI).

CloneElement: Clone Element is used in order to clone an element and pass it new props. They nailed the naming on these two.

 In ReactJS, Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘(=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.

Events are named using camel case instead of just using the lowercase. Events are passed as functions instead of strings. Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

 In ReactJS, Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

It is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

You just need to use HTTPS=true configuration. You can edit your package.json scripts section:

"scripts": {

  "start": "set HTTPS=true && react-scripts start"

}

or just run set HTTPS=true && npm start

The React Intl library makes internalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.

mapStateToProps() is a utility which helps your component get updated state (which is updated by some other components):

const mapStateToProps = (state) => {

  return {

    todos: getVisibleTodos(state.todos, state.visibilityFilter)

  }

}

mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):

const mapDispatchToProps = (dispatch) => {

  return {

    onTodoClick: (id) => {

      dispatch(toggleTodo(id))

    }

  }

}

You can use applyMiddleware().

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():

import { createStore, applyMiddleware } from 'redux'

const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)

getInitialState():It is executed before the creation of the component.

componentDidMount(): It is executed when the component gets rendered and placed on the DOM.

shouldComponentUpdate(): It is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions.

componentDidUpdate(): It is  invoked immediately after rendering takes place.

componentWillUnmount(): It is  invoked immediately before a component is destroyed and unmounted permanently.

Example:

class Car extends React.Component{

 constructor(props){

   super(props);

   this.state = {

     brand: "BMW",

     color: "black"

   }

 }

}