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

REACT JS & CERTIFICATION
Weekend / Weekday Batch

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. Explain the concept of a Hook in React.

JDuring an interview, you can explain Hooks in the following way: “Hooks are a new feature in React that allows us to add state and other React features to functional components. They were introduced in React 16.8 and have since become a popular way to manage state and side effects in functional components. Hooks are named functions that start with the word use and allow us to reuse stateful logic across components without having to write a class component. For example, the useState Hook allows us to add state to a functional component and the useEffect Hook lets us perform side effects like data fetching or updating the document title. Hooks make our code more reusable, easier to understand, and easier to test.”

70.Explain the concept of a Render Prop in React.

A render prop in React is a technique for conveying component logic. Instead of using a component’s props to communicate data and behaviour, a render prop is a function that a component utilises to select what to render. The “provider” component makes the render prop available, but the “consumer” component is the one that uses it. With this approach, component flexibility and reuse are enhanced.