React JS Interview Questions and Answers Set 3

21.How do you tell react to build in production mode and what will that do?

Ordinarily you’d utilize webpack’s defineplugin strategy to set node_env to production. This will strip out things like proptype approval and additional notices. Over that, it’s likewise a smart thought to minify your code in light of the fact that react utilizes uglify’s dead-code end to strip out advancement just code and remarks, which will radically diminish the measure of your package.

22. List some of the cases when you should use refs.

Following are the cases when refs should be used:

  • When you need to manage focus, select text or media playback
  • To trigger imperative animations
  • Integrate with third-party dom libraries

23.What is react intl?

The react intl library makes internalization in react straightforward, with off-the-shelf components and an api that can handle everything from formatting strings, dates, and numbers, to pluralization. React intl is part of formatjs which provides bindings to react via its components and api.

24.How do you apply vendor prefixes to inline styles in react?

React does not apply vendor prefixes automatically. You need to add vendor prefixes manually.

<div style={{

Transform: ‘rotate(90deg)’,

Webkittransform: ‘rotate(90deg)’, // note the capital ‘w’ here

Mstransform: ‘rotate(90deg)’ // ‘ms’ is the only lowercase vendor                         prefix

}} />

25. What do you know about controlled and uncontrolled components?

Controlled vs uncontrolled components

Controlled components Uncontrolled components
1. They do not maintain their own state 1. They maintain their own state
2. Data is controlled by the parent component 2. Data is controlled by the dom
3. They take in the current values through props and then notify the changes via callbacks 3. Refs are used to get their current values

26.How to update a component every second?

You need to use setinterval() to trigger the change, but you also need to clear the timer when the component unmounts to prevent errors and memory leaks.

Componentdidmount() {

This.interval = setinterval(() => this.setstate({ time: date.now() }), 1000)

}

Componentwillunmount() {

Clearinterval(this.interval)

}

27. What are higher order components(hoc)?

Higher order component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from react’s compositional nature. Hoc are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that hoc are ‘pure’ components.

28.What are the main features of react intl?

  • Display numbers with separators.
  • Display dates and times correctly.
  • Display dates relative to “now”.
  • Pluralize labels in strings.
  • Support for 150+ languages.
  • Runs in the browser and node.
  • Built on standards.

29.How to add google analytics for react router?

Add a listener on the history object to record each page view:

History.listen(function (location) {

Window.ga(‘set’, ‘page’, location.pathname + location.search)

Window.ga(‘send’, ‘pageview’, location.pathname + location.search)

})

30.What can you do with hoc?

Hoc can be used for many tasks like:

  • Code reuse, logic and bootstrap abstraction
  • Render high jacking
  • State abstraction and manipulation
  • Props manipulation