React JS Interview Questions and Answers Set 7

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

62. 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 (<browserrouter>) in which we enclose the specific child routes (<route>).
  • No need to manually set history value: in react router v4, all we need to do is wrap our routes within the<browserrouter> 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.

63. How is react router different from conventional routing?

Conventional routing vs react routing

Topic Conventional routing React routing
Pages involved Each view corresponds to a new file Only single html page is involved
Url changes A http request is sent to a server and corresponding html page is received Only the history attribute is changed
Feel User actually navigates across different pages for each view User is duped thinking he is navigating across different pages

 

64.How to set state with a dynamic key name?

If you are using es6 or the babel transpiler to transform your jsx code then you can accomplish this with computed property names.

Handleinputchange(event) {

This.setstate({ [event.target.id]: event.target.value })

}

65. List some of the major advantages of react.

Some of the major advantages of react are:

  • It increases the application’s performance
  • It can be conveniently used on the client as well as server side
  • Because of jsx, code’s readability increases
  • React is easy to integrate with other frameworks like meteor, angular, etc
  • Using react, writing ui test cases become extremely easy

66.What is reconciliation?

When a component’s props or state change, react decides whether an actual dom update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, react will update the dom. This process is called reconciliation.

67.does reactjs use html?

No, it uses jsx which is simiar to html.

68.What is context?

Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, ui theme need to be accessed in the application by many components.

Const {provider, consumer} = react.createcontext(defaultvalue)

69. 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>
);
}

70.What is lifting state up in react?

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.