React JS Interview Questions and Answers Set 2

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

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

REACT JS & CERTIFICATION
Weekend / Weekday Batch

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

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