React JS Interview Questions and Answers Set 9

81.How to pass a parameter to an event handler or callback?

You can use an arrow function to wrap around an event handler and pass parameters:

<button onclick={() => this.handleclick(id)} />

This is an equivalent to calling .bind:

<button onclick={this.handleclick.bind(this, id)} />

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

83.What is the purpose of callback function as an argument of setstate()?

The callback function is invoked when setstate finished and the component gets rendered. Since setstate() is asynchronous the callback function is used for any post action.

it is recommended to use lifecycle method rather than this callback function.

Setstate({ name: ‘john’ }, () => console.log(‘the name has updated and component re-rendered’))

84.what is the usage of refs and keys used in react?

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

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.

Render () {
Return (
<ul>
{this.state.todoitems.map(({task, uid}) => {
Return <li key={uid}>{task}</li>
})}
</ul>
)
}

85.Is it possible to nest jsx elements into other jsx elements?

It is possible. The process is quite similar to that of nesting the html elements. However, there are certain things that are different in this. You must be familiar with the source and destination elements to perform this task simply.

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

<switch>

<route exact path=’/’ component={home}/>

<route path=’/posts/:id’ component={newpost}/>

<route path=’/posts’   component={post}/>

</switch>

87.Explain dom diffing?

When the components are rendered twice, virtual dom begins checking the modifications elements have goto They represent the changed element on the page simply. There are several other elements that don’t go through changes. To cut down the changes to the dom as an outcome of user activities, dom doffing is considered. It is generally done to boost the performance of the browser. This is the reason for its ability to perform all the tasks quickly.

88.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(
<div>
<h1> hello world from edureka!!</h1>
</div>
);
}

89.What is the difference between state and props?

Both props and state are plain javascript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

90.What is one of the core types in react?

Reactnode