React - Topics you Must Know Before your Interview at the 2020

React - Topics you Must Know Before your Interview at the 2020

This post, I want to discuss React concepts that every aspiring and current react developer should know before their interviews.

React is one of the popular Javascript libraries and it’s going to be more popular in 2020 and beyond. React is released first in 2013 and it gained a lot of popularity over the years. It’s a declarative, component-based and efficient javascript library for building user interfaces.

I want to discuss React concepts that every aspiring and current react developer should know before their interviews.

What is Declarative Programming

Declarative Programming is a programming paradigm which focuses on what you do rather than how you do. It expresses the logic without explicitly defining the steps. What it means is we need to declare the components what to display depending on the computation of logic. It doesn’t describe the control flow steps. Examples of declarative programming are HTML, SQL, etc

// HTML
<div>
  <p>Declarative Programming</p>
</div>

HTML file

select * from studens where firstName = 'declarative';

SQL file

Declarative Programming vs Imperative Programming?

Declarative Programming is written in such a way that it describes what should be done whereas Imperative Programming describes how to do it. In Declarative Programming you let the compiler decide how to do things. Declarative Programs are easy to reason because the code itself describes what it is doing.

Here is an example where I want to increment each element in the array, with declarative we are using map function and let the compiler do the rest and with imperative we are writing all the control flow steps.

const numbers = [1,2,3,4,5];

// declarative programming
const doubleWithDec = numbers.map(number => number * 2);

console.log(doubleWithDec)

// imperative programming
const doubleWithImp = [];
for(let i=0; i<numbers.length; i++) {
    const numberdouble = numbers[i] * 2;
    doubleWithImp.push(numberdouble)
}

console.log(doubleWithImp)

declarative vs imperative

What is Functional Programming

Functional programming is a part of declarative programming. Functions in javascript are first class citizens which mean functions are data and you can save, retrieve, and pass these functions throughout your application just like variables.

There are some core concepts for the programming to be functional. Here are those

  • Immutability
  • Pure Functions
  • Data Transformations
  • Higher-Order Functions
  • Recursion
  • Composition

Immutability

Immutability means unchangeable. In functional programming, you can’t change the data and it never changes. If you want to mutate or change the data, you have to copy the data and change the copied version and use it.

For instance, here is a student object and changeName function and if you want to change the name of the student, you need to copy the student object first and then return the new object.

In javascript, function arguments are references to actual data you should not do this student.firstName = "testing11". This will mutate the actual student object instead, you should use Object.assign to copy the object and return the new object.

let student = {
    firstName: "testing",
    lastName: "testing",
    marks: 500
}

function changeName(student) {
    // student.firstName = "testing11" //should not do it
    let copiedStudent = Object.assign({}, student);
    copiedStudent.firstName = "testing11";
    return copiedStudent;
}

console.log(changeName(student));

console.log(student);

Immutability demonstration

Pure Functions

Pure Functions are the functions which always takes one or more arguments and computes on arguments and returns data or functions. It doesn’t have side effects such as setting global state, changing the application state and it always treats arguments as immutable data.

I want to add an address to the student object with the function called appendAddress. If you look at the first version of an impure function it doesn’t have an argument, It changes the global state or application state by changing the student object directly.

If you look at the second version, it takes the argument, computes based on argument, returns a new object without mutating the argument.

let student = {
    firstName: "testing",
    lastName: "testing",
    marks: 500
}

// impure function
function appendAddress() {
    student.address = {streetNumber:"0000", streetName: "first", city:"somecity"};
}

console.log(appendAddress());

// pure function
function appendAddress(student) {
    let copystudent = Object.assign({}, student);
    copystudent.address = {streetNumber:"0000", streetName: "first", city:"somecity"};
    return copystudent;
}

console.log(appendAddress(student));

console.log(student);

pure vs impure function

Data Transformations

We are talking a lot about immutability so how do we change data if the data is immutable. As discussed above, we always produce transformed copies of the original instead of directly changing the original data.

We will look at some of the javascript built-in functions for this. There is a lot of other functions as well and here are some examples. All these functions don’t change the existing data instead it returns new arrays or objects.

let cities = ["irving", "lowell", "houston"];

// we can get the comma separated list
console.log(cities.join(','))
// irving,lowell,houston

// if we want to get cities start with i
const citiesI = cities.filter(city => city[0] === "i");
console.log(citiesI)
// [ 'irving' ]

// if we want to capitalize all the cities
const citiesC = cities.map(city => city.toUpperCase());
console.log(citiesC)
// [ 'IRVING', 'LOWELL', 'HOUSTON' ]

data transformation

Higher-Order Functions

Higher order functions are the functions which take functions as an argument or return functions or sometimes they do both. These higher-order functions can manipulate other functions.

Array.map, Array.filter and Array.reduceare the higher order functions since they take functions as arguments

const numbers = [10,20,40,50,60,70,80]

const out1 = numbers.map(num => num * 100);
console.log(out1);
// [ 1000, 2000, 4000, 5000, 6000, 7000, 8000 ]

const out2 = numbers.filter(num => num > 50);
console.log(out2);
// [ 60, 70, 80 ]

const out3 = numbers.reduce((out,num) => out + num);
console.log(out3);
// 330

map, reduce and filter functions

Here is another example for the higher-order function called isPersonOld which takes two other functions called message and isYoung and manipulate and return data.

const isYoung = age => age < 25;

const message = msg => "He is "+ msg;

function isPersonOld(age, isYoung, message) {
    const returnMessage = isYoung(age)?message("young"):message("old");
    return returnMessage;
}

// passing functions as an arguments
console.log(isPersonOld(13,isYoung,message))
// He is young

higher-order function example

Recursion

Recursion is a technique where the function calls itself until a certain condition is met. It’s better to use Recursion instead of loops whenever possible. You have to be careful with this since browsers can’t handle too much recursion and throw errors.

Here is an example to demonstrate the recursion where we are printing a name like a staircase. We can do with for loop as well but, always prefer recursion whenever possible.

function printMyName(name, count) {
    if(count <= name.length) {
        console.log(name.substring(0,count));
        printMyName(name, ++count);
    }
}

console.log(printMyName("Bhargav", 1));

/*
B
Bh
Bha
Bhar
Bharg
Bharga
Bhargav
*/

// withotu recursion
var name = "Bhargav"
var output = "";
for(let i=0; i<name.length; i++) {
    output = output + name[i];
    console.log(output);
}

recursion example

Composition

In React, we divide the features into small reusable pure functions and we have to put all these reusable functions together to make it a product eventually. Combining all the smaller functions into larger functions and eventually, you would get an application. This is called composition.

There are a lot of different implementations and methods to implement composition. One of the familiar methods that we know from Javascript is chaining. Chaining is a method to invoke a function on the return value of the previous function with the dot notation.

Here is an example of it. We have a name and I want to return if firstName and lastName are greater than 5 words with a capital case and also I want to print the name and length of the name.

const name = "Bhargav Bachina";

const output = name.split(" ")
    .filter(name => name.length > 5)
    .map(val => {
    val = val.toUpperCase();
    console.log("Name:::::"+val);
    console.log("Count::::"+val.length);
    return val;
});

console.log(output)
/*
Name:::::BHARGAV
Count::::7
Name:::::BACHINA
Count::::7
[ 'BHARGAV', 'BACHINA' ]
*/

chaining example

In React, we use a different method other than chaining because it is hard to do chaining if you have more functions like 30. The goal here is combining all simpler functions to generate a higher order function.

const name = compose(
    splitmyName,
    countEachName,
    comvertUpperCase,
    returnName
)

console.log(name);

composition technique in react

What is React

React is a simple javascript UI library for building efficient and faster user interfaces. It’s a lightweight library which makes it popular. It follows the component design pattern, declarative programming paradigm, and functional programming concepts to make the front end apps efficient. It uses Virtual DOM to efficiently manipulates DOM. It follows one-way data flow from higher order components to lower order components.

How does it differ From Angular

Angular is a full blown MVC framework and comes with a lot of opinionated features such as services, directives, templates, modules, resolvers, etc. React is very lightweight lib which focusses only on view part of MVC. Angular follows two directional data flow whereas React follows uni-directional data flow which is top to down approach. React gives a lot of freedom to the developers when it comes to developing features, for example, the way we call API, routing, etc. We don’t have to include router lib unless we need it in our project.

What is Virtual DOM and How it works

React uses Virtual DOM to update the real DOM which makes it efficient and faster. Let’s discuss these in detail.

What is Virtual DOM

The browser follows the HTML instructions to construct the Document Object Model or DOM. All the elements in the HTML document become DOM elements when the browser loads HTML and renders the user interface.

DOM is a hierarchy of elements starting with the root element. For example, look at the following HTML.

<div>
    <div>
        <h1>This is heading</h1>
        <p>this is paragraph</p>
        <div>
            <p>This is just a paragraon</p>
        </div>
    </div>
    <div>
        <h1>This is heading</h1>
        <p>this is paragraph</p>
        <div>
            <p>This is just a paragraon</p>
        </div>
    </div>
    <div>
        <h1>This is heading</h1>
        <p>this is paragraph</p>
        <div>
            <p>This is just a paragraon</p>
        </div>
    </div>
</div>

sample HTML

When you load this HTML in the browser, all these HTML elements are translated into DOM elements like below


DOM elements

When it comes to SPA applications, you load the index.html for the first time and loads the updated data or another html in that index.html itself**.** As users navigate through the site, we update the same index.html with the new content.Every time the DOM changes, browser need to recalculate the CSS, do layout, and repaint the web page.

React uses Virtual DOM to reconstruct the DOM efficiently. It makes a very complicated and time-consuming task of DOM manipulation easier for us. React abstracts away all this from developers to build efficient UI with the help of Virtual DOM.

How Does Virtual DOM Works

Virtual DOM is nothing but the javascript object representation of real DOM. Updating javascript objects is easier and faster when compared with updating the real DOM. With this in mind let’s see how it works.

React keeps the entire copy of DOM as a virtual DOM

real DOM and virtual DOM

Whenever there is an update comes, it maintains two virtual DOMs to compare the previous state and current state and figures out what objects have been changed. For instance, paragraph text changed to change.

comparing two virtual DOMs

Now it finds out the changes by comparing two virtual DOMs and send those updates to real DOM

sending the updated to DOM

Once real DOM updates, it updates the UI as well

updating real DOM and UI

What is JSX

JSX is a syntax extension to javascript. It’s like a template language with the full power of javascript. It produces React elements which will be rendered in the DOM. React recommends using JSX for the components. In JSX, we combine both javascript and HTML and produces react elements which can be rendered in the DOM.

Here is an example of JSX. We can see how we are combining javascript and HTML. If there is any dynamic variable included in the HTML, we should use the expression language {}.

import React from 'react';

export const Header = () => {

    const heading = 'TODO App'

    return(
        <div style={{backgroundColor:'orange'}}>
            <h1>{heading}</h1>
        </div>
    )
}

component using JSX

Components and Different Types

Everything is a component in React. We usually break up the entire logic of the application into small individual pieces. We call each individual piece as a component. In general, A component is a javascript function which takes the input, process it and returns React element which renders in the UI.

There are different types of components in the React. Let’s see those in detail.

Functional/Stateless/Presentational Components

A functional or stateless component is a pure function which takes props or no props and returns the react element. These are pure functions which don’t have any side effects. These components don’t have state or lifecycle methods. Here is an example.

import React from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';

export const Header = () => {
    return(
        <Jumbotron style={{backgroundColor:'orange'}}>
            <h1>TODO App</h1>
        </Jumbotron>
    )
}

functional/stateless component

Class/Stateful Components

Class or Stateful components have state and lifecycle methods and it can change the state of the component with the help of this.setState(). Class components are created by extending the React.Component and it is initialized in the constructor and might have child components as well. Here is an example.

import React from 'react';
import '../App.css';
import { ToDoForm } from './todoform';
import { ToDolist } from './todolist';

export class Dashboard extends React.Component {

  constructor(props){
    super(props);

    this.state = {

    }
  }
  
  render() {
    return (
      <div className="dashboard"> 
          <ToDoForm />
          <ToDolist />
      </div>
    );
  }
}

class/stateful component

Controlled Components

Controlled components is a technique which handles input forms in React. Form elements typically maintain their own state and react maintains state in the state property of the component. We can combine both to control the input forms. This is called a controlled component. So, In controlled component form data is handled by React component.

Here is an example. when the user enters the name in the todo item and we are invoking a javascript function handleChangeto capture the data for every keystroke and putting it in the state so that we can use that data from the state in the handleSubmit.

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export class ToDoForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
          <div className="todoform">
            <Form>
                <Form.Group as={Row} controlId="formHorizontalEmail">
                    <Form.Label column sm={2}>
                    <span className="item">Item</span>
                    </Form.Label>
                    <Col sm={5}>
                        <Form.Control type="text" placeholder="Todo Item" />
                    </Col>
                    <Col sm={5}>
                        <Button variant="primary" type="submit">Add</Button>
                    </Col>
                </Form.Group>
            </Form>
         </div>
      );
    }
  }

controlled component

UnControlled Components

Most of the times it is recommended to use controlled components. There is an alternative approach called uncontrolled components to handle form data for this by using Ref. In Uncontrolled Components, Ref is used to directly access the form values from the DOM instead of event handlers.

Here is an example. We built the same form with theRef instead of using React state. we define the Ref with React.createRef() and pass that input form and accessing the form values directly from the DOM in the handleSubmit method.

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export class ToDoForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
      this.input = React.createRef();
  
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.input.current.value);
      event.preventDefault();
    }
  
    render() {
      return (
          <div className="todoform">
            <Form>
                <Form.Group as={Row} controlId="formHorizontalEmail">
                    <Form.Label column sm={2}>
                    <span className="item">Item</span>
                    </Form.Label>
                    <Col sm={5}>
                        <Form.Control type="text" placeholder="Todo Item" ref={this.input}/>
                    </Col>
                    <Col sm={5}>
                        <Button variant="primary" onClick={this.handleSubmit} type="submit">Add</Button>
                    </Col>
                </Form.Group>
            </Form>
         </div>
      );
    }
  }

uncontrolled component

Container Components

Container components are the components which deal with fetching data, subscribing to the redux store, etc. They contain presentational components and other container components. But they never have html in it.

Higher order Components

Higher order components are the components which take a component as an argument and produces another component. Redux connect is the example of a higher order component. This is a powerful technique for producing reusable components.

Props and State

Props are read-only properties which are passed to the components to render the UI and with the state, we can change the output of the component over time.

Here is an example of a class component which has both props and state defined in the constructor and whenever you modify the state with this.setState(), render( ) function will be called again to change the output of the component in the UI.

import React from 'react';
import '../App.css';

export class Dashboard extends React.Component {

  constructor(props){
    super(props);

    this.state = {
        name: "some name"
    }
  }

  render() {

    // reading state
    const name = this.state.name;

    //reading props
    const address = this.props.address;

    return (
      <div className="dashboard"> 
          {name}
          {address}
      </div>
    );
  }
}

props and state

What are PropTypes

Type-checking is important as your app grows bigger and bigger over time. PropTypes provides type checking for your components and serves as nice documentation to the other developers. It’s always recommended to add PropTypes for your component if your react project is not in Typescript.

We can also define the Default Props for each component to display if the component doesn’t receive any props. Here is an example. UserDisplay has three props: name, address, and age and we are defining default props and prop types for those.

import React from 'react';
import PropTypes from 'prop-types';

export const UserDisplay = ({name, address, age}) => {

    UserDisplay.defaultProps = {
        name: 'myname',
        age: 100,
        address: "0000 onestreet"
    };

    return (
        <>
            <div>
                <div class="label">Name:</div>
                <div>{name}</div>
            </div>
            <div>
                <div class="label">Address:</div>
                <div>{address}</div>
            </div>
            <div>
                <div class="label">Age:</div>
                <div>{age}</div>
            </div>
        </>
    )
}

UserDisplay.propTypes = {
    name: PropTypes.string.isRequired,
    address: PropTypes.objectOf(PropTypes.string),
    age: PropTypes.number.isRequired
}

PropTypes Example

How to Update State and How not to

You should not modify the state directly. The only place you can assign to the state is in the constructor. Using the state directly doesn’t trigger the re-rendering. React merges the state when we use this.setState().

//  wrong way
this.state.name = "some name"

// right way
this.setState({name:"some name"})

It’s always safe to use the second form of this.setState() because props and state updated are asynchronous. Here we are updating the state based on the props.

// wrong way
this.setState({
    timesVisited: this.state.timesVisited + this.props.count
		})
		
// right way
this.setState((state, props) => {
    timesVisited: state.timesVisited + props.count
});
Component Lifecycle Methods

Component goes through a series of lifecycle methods as it enters and leaves the DOM. Here are those lifecycle methods.

componentWillMount()

This lifecycle method is called, as the component enters the DOM and you have the last chance to edit the state so that it will be displayed on the screen. It occurs only once.

componentDidMount()

This lifecycle method is called when the component entered the DOM and you can call the API in this lifecycle. It occurs only once.

componentWillReceiveProps()

Whenever there is a change in the props, the component enters into the update phase. This lifecycle method is called to receive the props and you can check the previous props and current props here and you can update the state depending on the result.

shouldComponentUpdate()

This lifecycle method is called whenever there is an update to the props or state and it returns a boolean value true by default. You can return false if you don’t want to rerender the DOM for this change. This is really useful to improve the performance of the app.

componentWillUpdate()

Whenever there is a change in the props or state, this lifecycle method is called. We can have a chance to access the state and edit it before rendering the UI.

componentDidUpdate()

This lifecycle method is called when the update to the component is completed. Never call this.setState() in this lifecycle method.

componentWillUnMount()

This lifecycle method is called before the component gets removed from the DOM. This is the right place to remove all the third party libs or clear all the events.

getDerivedStateFromError()

This lifecycle method is used in ErrorBoundary class. Actually, any class becomes ErrorBoundary if it uses this lifecycle method. This is used to render the fallback UI if something goes wrong in the component tree instead of displaying some weird errors on the screen.

componentDidCatch()

This lifecycle method is used in ErrorBoundary class. Actually, any class becomes ErrorBoundary if it uses this lifecycle method. This is used to log the errors if something goes wrong in the component tree.

Composition Over Inheritance

In React, We always use Composition over Inheritance. We already discussed what is composition in the Functional programming section. This is a technique of combining simple reusable functions to generate a higher-order component. Here is an example of composition, we are using two small components todoForm and todoList in the dashboard component.

import React from 'react';
import '../App.css';
import { ToDoForm } from './todoform';
import { ToDolist } from './todolist';

export class Dashboard extends React.Component {

  render() {
    return (
      <div className="dashboard"> 
          <ToDoForm />
          <ToDolist />
      </div>
    );
  }
}

composition example

How to Apply Styles In React

There are three ways to apply styles to React components.

External Stylesheet

In this method, you can import external stylesheet into your component use classes. But you should use **className** instead of **class** to apply styles for the React elements. Here is an example.

import React from 'react';
import './App.css';
import { Header } from './header/header';
import { Footer } from './footer/footer';
import { Dashboard } from './dashboard/dashboard';
import { UserDisplay } from './userdisplay';

function App() {
  return (
    <div className="App">
      <Header />
      <Dashboard />
      <UserDisplay />
      <Footer />
    </div>
  );
}

export default App;

Example of using an external stylesheet App.css

Inline Style

In this method, we can directly pass props to the HTML elements with the property called style. Here is an example. The important thing we should notice here is that we are passing javascript object to the **style** prop that’s why we are using **backgroundColor** instead of CSS way **background-color.**

import React from 'react';

export const Header = () => {

    const heading = 'TODO App'

    return(
        <div style={{backgroundColor:'orange'}}>
            <h1>{heading}</h1>
        </div>
    )
}

Example of using inline styles

Define a Style Object and use it

Since we are passing javascript object to the style property, we can define a style object in the component and use it. Here is an example and you can pass this object down the component tree as props as well.

import React from 'react';

const footerStyle = {
    width: '100%',
    backgroundColor: 'green',
    padding: '50px',
    font: '30px',
    color: 'white',
    fontWeight: 'bold'
}

export const Footer = () => {
    return(
        <div style={footerStyle}>
            All Rights Reserved 2019
        </div>
    )
}

CSS object example

What is Redux and How It Works

Redux is a state management library for the React and it is based on flux. Redux facilitates the one way data flow in React. Redux abstracts state management away from React entirely.

How it Works

In React, Components are connected to the redux store and if you want to access the redux store, you need to dispatch an action containing id and payload. The payload in the action is optional. Actions forward it to Reducers.

When the reducer receives the action, it compares the action id with the predefined case statements. When it matches, it changes the state accordingly for the corresponding action and returns a new state.

When the Redux state changes, components connected to the redux store will receive new state as the props. When the component receives the props, it will get into the update phase and rerenders the UI.

React Redux

Redux Cycle In Detail

Let’s see the whole redux cycle in detail.

redux cycle

Action: Action is nothing but a simple json object with type and payload as keys. Type is mandatory and the payload is optional here. Here is an example of action.

// action

{ 
  type:"SEND_EMAIL", 
  payload: data
};

action

Action Creators: These are the functions which create Actions so that we don’t have to write every action manually in our component when we dispatch an action. Here is an example of an action creator.

// action creator

export function sendEmail(data) {
    return { type:"SEND_EMAIL", payload: data};
}

action creator

Reducers: Reducers are the pure functions which takes the action and current state as arguments and compute the necessary logic and returns a new state. These Reducers doesn’t have any side effects. It doesn’t mutate the state instead always returns state. Here is an example.

export default function emailReducer(state = [], action){
 
  switch(action.type) {
      case "SEND_EMAIL":  return Object.assign({}, state, {
       email: action.payload
      });
      default: return state;
  }
}

reducer

How component connects with redux store

mapStateToProps: This function maps state to your props so whenever there is a change in the state you receive the new state as props. This is how you subscribe to the store.

mapDispatchToProps: This function is used to bind your action creators to your props so that we can dispatch an action using this.props.actions.sendEmail() in line 12.

connect and bindActionCreators are from the redux library. The former is used to connect to the store like line number 22 and the latter is used to bind your action creators to your props like line number 20.

// import connect
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

// import action creators
import * as userActions from '../../../actions/userActions';

export class User extends React.Component {
  
    handleSubmit() {
        // dispatch an action
        this.props.actions.sendEmail(this.state.email);
    }
  
}

// you are mapping you state props
const mapStateToProps = (state, ownProps) => ({user: state.user})
// you are binding your action creators to your props
const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(userActions, dispatch)})

export default connect(mapStateToProps, mapDispatchToProps)(User);

sample component

What is React Router Dom and How It Works

We navigate through pages in the large web applications and react-router-dom is the library for the routing in the App. Routing capabilities don’t come with React library, we have to install react-router-dom separately. You need to install React for the react-router-dom to work.

react-router-dom provides two routers BrowserRouter and HashRoauter. The former is used if you have a server serving static pages and the latter is used if you have a static file server.

react-router-dom components

  • BrowserRouter and HashRouter are the routers.
  • Route is used for the route matching.
  • Link component is used to create links in the application. It will be rendered as anchor tag in the HTML.
  • NavLink is the special link which highlights the currently active link.
  • Switch is not required but it is useful when combining routes.
  • Redirect is used to force the navigation in the component

Here is an example of Link, NavLink and Redirect in the component

// normal link
<Link to="/gotoA">Home</Link>

// link which highlights currently active route with the given class name
<NavLink to="/gotoB" activeClassName="active">
  React
</NavLink>

// you can redirect to this url
<Redirect to="/gotoC" />

example

Here is an example of the react router component. If you look at the below example we are matching the path and renders the appropriate component by using Switch and Route.

import React from 'react'
// import react router DOM elements
import { Switch, Route, Redirect } from 'react-router-dom'
import ComponentA from '../common/compa'
import ComponentB from '../common/compb'
import ComponentC from '../common/compc'
import ComponentD from '../common/compd'
import ComponentE from '../common/compe'


const Layout = ({ match }) => {
    return(
        <div className="">
            <Switch>
                <Route exact path={`${match.path}/gotoA`} component={ComponentA} />
                <Route path={`${match.path}/gotoB`} component={ComponentB} />
                <Route path={`${match.path}/gotoC`} component={ComponentC} />
                <Route path={`${match.path}/gotoD`} component={ComponentD} />
                <Route path={`${match.path}/gotoE`} component={ComponentE} />
            </Switch>
        </div>
    )}

export default Layout

react router example

What are Error Boundaries

In React, we usually have a component tree. If an error happens in any one of the components, it will break the whole component tree. There is no way of catching these errors. We can gracefully handle these errors with Error Boundaries.

Error Boundaries does two things

  • display fallback UI if an error occurs
  • lets you log errors

Here is an example of ErrorBoundary Class. Any class becomes ErrorBoundary if it implements any of these lifecycle methods getDerivedStateFromError or componentDidCatch. The former returns {hasError: true} to render the fallback UI and the latter is used to log the errors.

import React from 'react'

export class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, info) {
      // You can also log the error to an error reporting service
      console.log('Error::::', error);
    }
  
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>OOPS!. WE ARE LOOKING INTO IT.</h1>;
      }
  
      return this.props.children; 
    }
  }

ErrorBoundary

Here is how we can use ErrorBoundary in one of the components. I am wrapping ToDoForm and ToDoList with the ErrorBoundary class. If any error occurs in these components we log the errors and display fallback UI.

import React from 'react';
import '../App.css';
import { ToDoForm } from './todoform';
import { ToDolist } from './todolist';
import { ErrorBoundary } from '../errorboundary';

export class Dashboard extends React.Component {

  render() {
    return (
      <div className="dashboard"> 
        <ErrorBoundary>
          <ToDoForm />
          <ToDolist />
        </ErrorBoundary>
      </div>
    );
  }
}

Usage of ErrorBoundary

What are Fragments

In React, we need to have a parent element while returning react elements from the component. Sometimes it is annoying to put an extra node into the DOM. With Fragments, we don’t have to put an extra node into the DOM. All we need to wrap the content with React.Fragment or with shorthand notation .

Here is an example. WithFragments, we don’t have to put an extra div if it’s not necessary.


     
 // Without Fragments   
return (
    <div>
       <CompoentA />
       <CompoentB />
       <CompoentC />
    </div>
)

// With Fragments   
  return (
    <React.Fragment>
       <CompoentA />
       <CompoentB />
       <CompoentC />
    </React.Fragment>
  )

  // shorthand notation Fragments   
  return (
    <>
       <CompoentA />
       <CompoentB />
       <CompoentC />
    </>
  )

Fragments example

What are Portals

By default, all the child components render on the UI depending on the component Hierarchy. Portals make it possible to render component children outside of DOM hierarchy of parent component.

Here is an example. By default, parent component has children component in the DOM hierarchy.


default behavior

We can move the children components out of the parent component and attach it to the DOM node idsomeid. Let’s see that in action.

First, we get the reference id and we create an element div in the constrcutorand append child to that someRoot in the componentDidMount. Finally, we pass children to that particular DOM node with the help of ReactDOM.createPortal(this.props.childen), domnode).

const someRoot = document.getElementById('someid');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    someRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    someRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

portal example

portal in action

What is Context

Sometimes we have to pass the props down the component tree even though all the middle components don’t need those. Context is a way to pass the props without passing down the component tree on every level.

What are Hooks

Hooks is the new feature in the React from version 16.8. Remember we can’t use the state in functional components since these are not class components. Hooks make it possible to use state and other features in functional components without a class.

There are no breaking changes at this time and we don’t have to abandon out class components yet. With Hooks, you can take out the stateful logic and can be tested independently and they let you use React without classes. There are a bunch of hooks that we can use such as useState, useEffect, useContext, useReducer, etc.

Here are the fundamental rules of Hooks

  • Hooks should be used at the top level and should not be used inside loops, conditions or nested functions
  • Hooks should only be used in functional components. Another valid place is your own custom hook.

Let’s see one example to understand the hooks. This is a functional component which takes props and displays those on the UI. With the help of a useState hook, we converted this functional component into the stateful component. First, we define the state in line 5. This is equivalent to

constructor(props) {
 super(props);
 this.state = {
     name:'myname', age:10, address:'0000 one street'
 }
}

useState returns two items one is userand another one is setUser function. user is an object which can be used directly without this keyword and setUser is a function which can be used to set the state which the user clicks on the button in line 21. This function is equivalent to the following.

this.setState({name:'name changed'})
import React, { useState } from 'react';

export const UserDisplay = ({name, address, age}) => {

    const [user, setUser] = useState({ name: 'myname', age: 10, address: '0000 onestreet' });

    return (
        <>
            <div>
                <div class="label">Name:</div>
                <div>{user.name}</div>
            </div>
            <div>
                <div class="label">Address:</div>
                <div>{user.address}</div>
            </div>
            <div>
                <div class="label">Age:</div>
                <div>{user.age}</div>
            </div>
            <button onClick={() => setUser({name: 'name changed'})}>
                Click me
            </button>
        </>
    )
}

component with useState() hook

How to Improve Performance

There are a number of ways that we can improve app performance. Here are the important ones.

  • Always use shouldComponentUpdate lifecycle method appropriately. It avoids unnecessary rendering for the child components. If you have 100’s of components down the tree, not re-rendering the entire component tree definitely improves app performance.
  • Always use create-react-app to scaffold the project, this creates the entire project structure out of the box with a lot of optimizations.
  • Immutability is the key to improve performance. Instead of mutating the data, always create new collections on top of existing ones to keep the copying minimum which would improve performance.
  • Always use Keys when you are displaying lists or table, This makes React does updates much faster.
  • Make sure you ship the production build for the production.
  • Code Splitting is the technique of diving the code into separate files and load only those files which are necessary for that module or section.
How to Persist data when reloading the page

Single Page Applications load the index.html in the DOM first and then load the content as the user navigates through the pages or gets any data from the backend API in the same index.html.

If you reload the page index.html by hitting the reload button in the browser, the entire React app reloads and we will lose the state of the application. How can you preserve the app state?

We use the Browser localstorageto preserve the state of the application whenever we reload the app. We keep the entire store data in the localstorage and whenever there is a page refresh or reload, we load the state from the localstorage.


persisting data with local storage

How do you make an API call from React

We use redux-thunk to call the API in React. Since reducers are pure functions, there should not be any side effects such as calling an API. So, we have to make the API call from the action creators using redux-thunk. Action creator dispatches an Action putting the data from the API in the payload of action. Reducers receive the data as we discussed in the redux cycle above and the rest of the process is the same as well.


calling an API with Redux thunk

redux-thunk is a middleware. Once it is included in the project, every time you dispatch an action and this dispatch is passed through the thunk. If it’s a function and it just waits until the function process and returns the response. If it’s not a function it just processes normally.

Here is an example. sendEmailAPI is the function called from the component and takes a data and returns function with dispatch as an argument. We are using redux-thunk to call the API apiservice and waits until the response received. Once the response is received, we dispatch an action with the payload.

import apiservice from '../services/apiservice';

export function sendEmail(data) {
    return { type:"SEND_EMAIL", payload: data };
}

export function sendEmailAPI(email) {
    return function(dispatch) {
        return apiservice.callAPI(email).then(data => {
            dispatch(sendEmail(data));
        });
    }
}

redux thunk example

Conclusion

A good understanding of all the above topics is necessary for the successful interview. Even if you are currently working on React, understanding these concepts boost your confidence at your workplace.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thanks!

Hire React Js Developer from Expert React JS Development Company

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

Are you looking to hire React JS developer from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team of expert React JS developers, you can hire them on an hourly, weekly or monthly basis for the successful completion of your dream project.

Best 50 React Interview Questions for Frontend Developers in 2019

Best 50 React Interview Questions for Frontend Developers in 2019

In this article, you'll see best React interview questions which an aspiring front end developer must prepare in 2019 for React interviews.

In this article, you'll see best React interview questions which an aspiring front end developer must prepare in 2019 for React interviews.

So, here are the Top 50 React Interview Questions and Answers which are most likely to be asked by the interviewer. For your ease of access, I have categorized the React interview questions namely:
General React Interview QuestionsReact Component Interview QuestionsReact Redux Interview QuestionsReact Router Interview Questions#

General React – React Interview Questions 1. Differentiate between Real DOM and Virtual DOM.

2. What is React?

React is a front-end JavaScript library developed by Facebook in 2011.It follows the component based approach which helps in building reusable UI components.It is used for developing complex and interactive web and mobile UI.Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.## **3. What are the features of React? **

Major features of React are listed below:
It uses the virtual DOM instead of the real DOM.It uses server-side rendering.It follows uni-directional data flow or data binding.## 4. List some of the major advantages of React.

Some of the major advantages of React are:
It increases the application’s performanceIt can be conveniently used on the client as well as server sideBecause of JSX, code’s readability increasesReact is easy to integrate with other frameworks like Meteor, Angular, etcUsing React, writing UI test cases become extremely easy## 5. What are the limitations of React?

Limitations of React are listed below:
React is just a library, not a full-blown frameworkIts library is very large and takes time to understandIt can be little difficult for the novice programmers to understandCoding gets complex as it uses inline templating and JSX## 6. What is JSX?

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance. Below is an example of JSX:

render(){
    return(       
          
 
 

             
 
 
# Hello World from Edureka!!

 
 
 
         
 
 
 
    );
}

7. What do you understand by Virtual DOM? Explain its working.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

This Virtual DOM works in three simple steps.
Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

Then the difference between the previous DOM representation and the new one is calculated.

Once the calculations are done, the real DOM will be updated with only the things that have actually changed. ## 8. Why can’t browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

9. How different is React’s ES6 syntax when compared to ES5?

Syntax has changed from ES5 to ES6 in following aspects:
require vs import

// ES5
var React = require('react');
 
// ES6
import React from 'react';

  • export vs exports
// ES5
module.exports = Component;
 
// ES6
export default Component;

  • component and function
// ES5
var MyComponent = React.createClass({
    render: function() {
        return
 
 
### Hello Edureka!

 
 
 
;
    }
});
 
// ES6
class MyComponent extends React.Component {
    render() {
        return
 
 
### Hello Edureka!

 
 
 
;
    }
}

  • props
// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
        return
 
 
### Hello, {this.props.name}!

 
 
 
;
    }
});
 
// ES6
class App extends React.Component {
    render() {
        return
 
 
### Hello, {this.props.name}!

 
 
 
;
    }
}

  • state
// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return
 
 
### Hello, {this.state.name}!

 
 
 
;
    }
});
 
// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return
 
 
### Hello, {this.state.name}!

 
 
 
;
    }
}

10. How is React different from Angular? **React **Components – React Interview Questions 11. What do you understand from “In React, everything is a component.”

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

12. Explain the purpose of render() in React.

Each React component must have a **render() **mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as , , etc. This function must be kept pure i.e., it must return the same result each time it is invoked.

13. How can you embed two or more components into one?

We can embed components into one in the following way:

class MyComponent extends React.Component{
    render(){
        return(         
             
 
 

               
                 
 
 
# Hello

 
 
 
                
            
 
 
 
        );
    }
}
class Header extends React.Component{
    render(){
        return
 
 
# Header Component

 
 
 
    
   };
}
ReactDOM.render(
    , document.getElementById('content')
);

14. What is Props?

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. 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.

15. What is a state in React and how is it used?

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state().

16. Differentiate between states and props.

17. How can you update the state of a component?

State of a component can be updated using this.setState().

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (             
                    
 
 

                   
                      
 
 
# Hello {this.state.name}

 
 
 
                 
                      
 
 
## Your Id is {this.state.id}

 
 
 
                   
 
 
 
            );
        }
    }
ReactDOM.render(
    , document.getElementById('content')
);

18. What is arrow function in React? How is it used?

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.

//General way
render() {   
    return(
        
    );
}
//With Arrow Function
render() { 
    return(
         this.handleOnChange(e) } />
    );
}

19. Differentiate between stateful and stateless components.

20. What are the different phases of React component’s lifecycle?

There are three different phases of React component’s lifecycle:
Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.*Updating Phase: *Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.*Unmounting Phase: *This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.## 21. Explain the lifecycle methods of React components in detail.

Some of the most important lifecycle methods are:
componentWillMount() **Executed just before rendering takes place both on the client as well as server-side.componentDidMount() **Executed on the client side only after the first render.***componentWillReceiveProps() ***– Invoked as soon as the props are received from the parent class and before another render is called.shouldComponentUpdate() **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() *– Called just before rendering takes place in the DOM.componentDidUpdate() **Called immediately after rendering takes place.*componentWillUnmount() *– Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.## 22. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:
Events are named using camel case instead of just using the lowercase.Events are passed as functions instead of strings.
The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

23. How do you create an event in React?
class Display extends React.Component({   
    show(evt) {
        // code  
    },  
    render() {     
        // Render the div with an onClick prop (value is a function)       
        return (           
           
 
 
Click Me!

 
 
 
        );   
    }
});

24. What are synthetic events in React?

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.

25. What do you understand by refs in React?

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

class ReferenceDemo extends React.Component{
     display() {
         const name = this.inputDemo.value;
         document.getElementById('disp').innerHTML = name;
     }
render() {
    return(       
          
 
 

            Name:  this.inputDemo = input} />
            Click           
             
 
 
## Hello  !!!

 
 
 
        
 
 
 
    );
   }
 }

26. List some of the cases when you should use Refs.

Following are the cases when refs should be used:
When you need to manage focus, select text or media playbackTo trigger imperative animationsIntegrate with third-party DOM libraries## 27. How do you modularize code in React?

We can modularize code by using the export and import properties. They help in writing the components separately in different files.

//ChildComponent.jsx
export default class ChildComponent extends React.Component {
    render() {
        return(          
              
 
 

              
                 
 
 
# This is a child component

 
 
 
            
 
 
 
        );
    }
}
 
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {   
    render() {       
        return(          
             
 
 
              
                         
            
 
 
 
        
        ); 
    }
}

28. How are forms created in React?

React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements can’t directly update their state and their submission is handled by a JavaScript function. This function has full access to the data that is entered by the user into a form.

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}
 
render() {
    return (       
         
 
 

            
                Name:
                
            
            
        
 
 
 
    );
}

29. What do you know about controlled and uncontrolled components?

30. What are Higher Order Components(HOC)?

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

31. What can you do with HOC?

HOC can be used for many tasks like:
Code reuse, logic and bootstrap abstractionRender High jackingState abstraction and manipulationProps manipulation## 32. What are Pure Components?

*Pure *components are the simplest and fastest components which can be written. They can replace any component which only has a **render(). **These components enhance the simplicity of the code and performance of the application.

33. What is the significance of keys in React?

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.

React Redux – React Interview Questions 34. What were the major problems with MVC framework?

Following are some of the major problems with MVC framework:
DOM manipulation was very expensiveApplications were slow and inefficientThere was huge memory wastageBecause of circular dependencies, a complicated model was created around models and views
35. Explain Flux.

Flux is an architectural pattern which enforces the uni-directional data flow. It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time errors.

36. What is Redux?

Redux is one of the hottest libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

37. What are the three principles that Redux follows?

***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 depends solely on the values of their arguments.## 38. What do you understand by “Single source of truth”?

Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

39. List down the components of Redux.

Redux is composed of the following components:
Action – It’s an object that describes what happened.**Reducer **– It is a place to determine how the state will change.Store – State/ Object tree of the entire application is saved in the Store.View – Simply displays the data provided by the Store.## 40. Show how the data flows through Redux?

41. How are Actions defined in Redux?

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators. Below is an example of Action and Action Creator:

function addTodo(text) {
       return {
                type: ADD_TODO,   
                 text   
    }
}

42. Explain the role of Reducer.

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.

43. What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

44. How is Redux different from Flux?

45. What are the advantages of Redux?

Advantages of Redux are listed below:
**Predictability of outcome – **Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.**Maintainability – **The code becomes easier to maintain with a predictable outcome and strict structure.Server-side rendering – You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.**Developer tools – **From actions to state changes, developers can track everything going on in the application in real time.**Community and ecosystem – **Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.**Ease of testing – **Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.**Organization – **Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.# React Router – React Interview Questions

46. What is React Router?

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

47. Why is switch keyword used in React Router v4?

Although a **** is used to encapsulate multiple routes inside the Router. The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The ** **tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

48. Why do we need a Router in React?

A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.


    
    
    


49. List down the advantages of React Router.

Few advantages are:
Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component (**
**) in which we enclose the specific child routes (****).No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the **
** component.The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.## 50. How is React Router different from conventional routing?

I hope this set of React Interview Questions and Answers will help you in preparing for your interviews. All the best!

Top 50 Interview Questions for JavaScript Developer

Top 50 Interview Questions for JavaScript Developer

In this article, you'll see top 50 questions you should know before going to a JavaScript Developer job interview

Developer interviews are like the wild west. Nobody really knows what they’re doing. Most tech recruiters can’t distinguish between Java and JavaScript (thumbs up if you can). Yet somehow they’re tasked to recruit developers.

From time to time, we even get asked for eight years of Swift experience. Considering the Swift language is three years old, don’t let this stop you from applying.

Developer jobs are fun, challenging, and fulfilling. Getting past the interview can be as easy as flying through the door, or can be overly obnoxious to hellish whiteboard challenges. You never know what to expect.

Luckily, we as developers can prepare for all the technical parts and be sure to at least ace those. We never know what silly questions to expect, but at least we can be confident in our technical answers.

Most (modern) companies are waking up to the realization the developer interview process is broken and needs fixing. These are the companies we want to work for.

Without further ado, I gathered 100 questions that I think you should be able to answer before walking to a front-end developer interview.

General questions are questions to get to know you, how you react, think, and how well you fit in the team.

Keep your answers to these questions relatively short and concise, since they don’t carry that much weight.

Don’t trip over your words; take long pauses to think thoroughly about the questions. The questions are meant to “crack” you open so they can taste the yolk.

  1. What excites or interests you about coding?
  2. What did you learn yesterday/this week?
  3. Talk about your preferred development environment. Which Operating System, IDE, and Terminal do you use and why those in particular?
  4. If you could master one technology this year, what would it be? How would you go about mastering that skill?
  5. How did you handle the last disagreement with your direct boss? How did it resolve? Would you give me your boss’s number to check their side of the story? [The last question is a bluff, but be sure to not flinch. No one has the time to call your previous boss.]
  6. What resources, forums, or tools do you use to learn about the latest front end development and design trends? Any favorites and why?
  7. If you joined on a project and they [the dev team] used tabs and you used spaces, what would you do? Would you try to convince the team to use spaces or would you join the herd and use tabs?

[Trick question] — The most correct answer would be to use a standard format tool like Prettier, so everyone's code will look the same when it’s pushed to the repository. This way you can keep using spaces, and the team is free to use tabs.

If you force your opinion on the dev team, you wouldn’t be considered a team player, and if you used tabs without your full consent and reasoning, you wouldn’t be as motivated as everyone else and are more likely to quit.

8. Can you describe your workflow when you create a web page? What are the first five steps you take when creating a new project?

9. What is a recent technical challenge you experienced and how did you solve it?

10. What actions have you taken on recent projects to increase the maintainability of the code? Any particular programming paradigms you like such as functional programming or test-driven development?

Now that we’re past the general questions and chit-chat, it’s time for the showdown. This where the interview will start shooting technical questions at you.

Note: The questions are more focused toward front-end development but may include back-end, dev ops and problem-solving questions too.

11. Which version control systems are you familiar with? How do you share code between projects in a lossless way?

12. Name four ways to decrease page load.

13. What does CORS stand for and what issue does it address?

14. Explain what ARIA and screenreaders are, and how to make a website accessible.

15. What does a doctype do?

16. What are the building blocks of HTML5?

17. Describe the difference between localStorage, cookies, and sessionStorage.

18. What are data- attributes good for?

19. What kind of things must you be wary of when designing or developing for multilingual sites? How do you serve a page with content in multiple languages?

20. What is progressive rendering?

21. Explain how this works in JavaScript. How does this work in classes versus functions?

22. Describe event bubbling and event capturing.

23. Explain variable hoisting.

24. Explain the difference between:

  • function Animal() {}
  • var animal = Animal()
  • var animal = new Animal()

25. What’s the difference between host objects and native objects?

26. What’s a typical use case for anonymous functions?

27. Explain how JavaScript prototypal inheritance works.

28. What is a closure, and how/why would you use one?

29. What’s the difference between null and undefined?

30. What is the difference between == and ===?

31. What is Webpack? What problems does it solve?

32. Have you ever used a front-end framework or library? Which one?

33. Why is it called a Ternary operator; what does the word Ternary indicate?

34. What tools and techniques do you use debugging JavaScript code?

35. How do you debug JavaScript code that runs on the server, e.g. NodeJs?

36. What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

37. Given this code, how would you implement the duplicate function?

// make this work

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

38. Can you give an example of a curry function and why this syntax offers an advantage?

39. Can you give an example of destructuring an object or an array?

40. Who invented JavaScript and why is it called JavaScript?

41. What is the difference between these two functions?

// What's the difference?

const sayHello = name => console.log(name)

function sayHello(name) {
console.log(${name})
}

42. Why and when might you want to create static class members?

43. What are the differences between variables created using let, var or const?

44. What happens when you go to a website? What’s a DNS?

45. What is the V8 Engine? Who uses it?

46. What does $ in JavaScript code refer to?

47. Explain the difference between layout, painting, and compositing.

48. What are some ways you may improve your website’s scrolling performance?

49. What is the output of the following code?

let fs = require('fs');

console.log('1');

fs.readFile('test.txt', 'utf8', function(error, data) {
if (error) {
throw error;
}

console.log('2');

});

console.log('3');

50. What is the event loop in JavaScript and what does it do?

If you knew the answers to most questions, well done!

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

50+ Java Interview Questions for Programmers

Top 100 Python Interview Questions and Answers

Top 100 Python Interview Questions and Answers

Best 50 React Interview Questions and Answers in 2019

Top 50+ SQL Interview Questions and Answers in 2019

Best 50 Nodejs interview questions from Beginners to Advanced in 2019

100+ Java Interview Questions and Answers In 2019

Best 50 React Interview Questions for Frontend Developers in 2019

Best 50 Angular Interview Questions for Frontend Developers in 2019