20 Essential React.js Interview Questions 2017

Sharing 20 Essential React.js Interview Questions 2017

1. Explain the Virtual DOM, and a pragmatic overview of how React renders it to the DOM.

The Virtual DOM is an interesting concept; it’s a complex idea that boils down into a much simpler algorithm.
In React, if we create simple ES6 class and print it out, we have a function (as all functions can be used as a constructor in JavaScript):

const app = () => {
    let React = react,
        {Component} = React,
        DOM = reactDom

    class Comments extends Component {
        constructor(props){ super(props) }
        render(){ return <div>test</div> }
    }

    console.log(Comments)
}

require('react', 'react-dom').then(app)

The console.log(Comments) gives us something that looks like this (after compiled by Babel from ES6 to ES5):

function Comments(props) {
    _classCallCheck(this, Comments);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Comments).call(this, props));
}

When we write something to draw a React Component to the screen, we might have something like the following:

DOM.render(<Comments />, document.body)

The JSX gets transpiled into ES5 by Babel as well:

DOM.render(React.createElement(Comments, null), document.body);

We can see that <Comments /> is transpiled directly into React.createElement(Comments, null). This is where we can see what a Virtual DOM object actually is: a plain JavaScript Object that represents the tag to be rendered onto the screen.
Let’s inspect the output of React.createElement():

console.log(<div/>)
// or
console.log(React.createElement('div', null))

This gives us:

{"type":"div","key":null,"ref":null,"props":{},"_owner":null,"_store":{}}

See how the type is a string? DOM.render({...}) gets this object above and looks at the type, and decides whether or not to reuse an existing <div> element on the DOM or create a new <div> and append it.
The Virtual DOM is not a simple Object – it is a recursive structure. For example, if we add two elements beneath the <div/>:

console.log(<div><span/><button/></div>)
// or
console.log(React.createElement(
    'div',
    null,
    React.createElement('span', null),
    React.createElement('button', null)
))

What we get is a nested Object-tree:

{
    "type":"div",
    "key":null,
    "ref":null,
    "props":{
        "children": [
            {"type":"span","key":null,"ref":null,"props":{}},
            {"type":"button","key":null,"ref":null,"props":{}}
        ]
    }
}

This is why, in a React Component’s code, we can access the child and ancestor elements via this.props.children. What React will do is walk down a very deep tree of nested Objects (depending on your UI complexity), each sitting in their parent element’s children.
One thing to note is that the type so far has just been a string. When a React Element is made from a custom Component (like Comments above), the type is a function:

console.log(<Comments />)
// or
console.log(React.createElement(Comments, null))

gives us:

{
    "key":null,
    "ref":null,
    "props":{},
    “type”: function Component() { ... }
}

You can play around with a web version of this code at Matthew Keas’ github.

2. What is the significance of keys in React?

Keys in React are used to identify unique VDOM Elements with their corresponding data driving the UI; having them helps React optimize rendering by recycling existing DOM elements. Let’s look at an example to portray this.
We have two <TwitterUser> Components being rendered to a page, drawn in decreasing order of followers:

-----------
| A - 103 |
-----------
-----------
| B - 92  |
-----------

Let’s say that B gets updated with 105 Twitter followers, so the app re-renders, and switches the ordering of A and B:

-----------
| B - 105 |
-----------
-----------
| A - 103 |
-----------

Without keys, React would primarily re-render both <TwitterUser> Elements in the DOM. It would re-use DOM elements, but React won’t re-order DOM Elements on the screen.
With keys, React would actually re-order the DOM elements, instead of rendering a lot of nested DOM changes. This can serve as a huge performance enhancement, especially if the DOM and VDOM/React Elements being used are costly to render.
Keys themselves should be a unique number or string; so if a React Component is the only child with its key, then React will repurpose the DOM Element represented by that key in future calls to render().
Let’s demonstrate this with a simple list of todos rendered with React:

Interactive code sample available on Matthew Keas’ github.

class List extends Component {
    constructor(p){
        super(p)
        this.state = {
            items: Array(5).fill(1).map((x,i) => ({id:i}))
        }
    }

    componentDidMount(){
        const random = (a,b) => Math.random() < .5 ? -1 : 1

        setInterval(() => {
            this.setState({
                items: this.state.items.sort(random)
            })
        }, 20)
    }

    render() {
        let {items} = this.state
        return <ul>
            {items.map(item =>
                <li key={item.id}>{item.id}</li>)}
        </ul>
    }
}

DOM.render(<List />, document.body)

The setInterval() occurring on mount reorders the items array in this.state every 20ms. Computationally, if React is reordering the items in state, then it would manipulate the DOM elements themselves instead of “dragging” them around between positions in the <ul>.
It is worth noting here that if you render a homogenous array of children – such as the <li>’s above – React will actually console.warn() you of the potential issue, giving you a stack trace and line number to debug from. You won’t have to worry about React quietly breaking.

Find More questions on React Js From https://www.onlineinterviewquestions.com/react-js-interview-questions/


Article Source: https://www.toptal.com/react/interview-questions