React JS Interview Questions and Answers Set 2

11.What are the popular react-specific linters?

Eslint is a popular javascript linter. There are plugins available that analyse specific code styles. One of the most common for react is an npm package called eslint-plugin-react. By default, it will check a number of best practices, with rules checking things from keys in iterators to a complete set of prop types. Another popular plugin is eslint-plugin-jsx-a11y, which will help fix common issues with accessibility. As jsx offers slightly different syntax to regular html, issues with alttext and tabindex, for example, will not be picked up by regular plugins.

12.Is it possible to use async/await in plain react?

If you want to use async/await in react, you will need babel and transform-async-to-generator plugin. React native ships with babel and a set of transforms.

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

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

16.Why is a component constructor called only once?

React’s reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it’s the same component as before, so reuses the previous instance rather than creating a new one.

17. 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 (

<div onclick={this.show}>click me!</div>

);

}

});

18.How react router is different from history library?

React router is a wrapper around the history library which handles interaction with the browser’s window. history with its browser and hash histories. It also provides memory history which is useful for environments that don’t have global history, such as mobile app development (react native) and unit testing with node.

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

20.What is the purpose of push() and replace() methods of history?

A history instance has two methods for navigation purpose.

Push()

Replace()

If you think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.