React Interview Questions
Milestone 3 - Day 4
1. How to perform automatic redirect after login?
Rendering a <Redirect> component, which is provided by react-router package, will navigate to a new location. Like server-side redirects, the new location will override the current location in the history stack.
import React, { Component } from 'react'
import { Redirect } from 'react-router'
export default class LoginComponent extends Component {
render() {
if (this.state.isLoggedIn === true) {
return <Redirect to="/your/redirect/page" />
} else {
return <div>{'Login Please'}</div>
}
}
}2. How to format date using React Intl?
The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.
import { injectIntl, intlShape } from 'react-intl'
const stringDate = this.props.intl.formatDate(date, {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
const MyComponent = ({intl}) => (
<div>{`The formatted date is ${stringDate}`}</div>
)
MyComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(MyComponent)3. Are there any similarities between Redux and RxJS?
Though both are used for different purposes, there are few similarities between them:
i) Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs, which can be presumed 50% as an alternative to Angular.
RxJS is a reactive programming library. It is usually used as a tool to accomplish asynchronous tasks in JavaScript. It can be presumed as an alternative to JavaScript Promises.
ii) Redux uses the Reactive paradigm because the Store is reactive. The Store observes actions from a distance, and changes itself.
RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives us basic building blocks, Observables, to accomplish this pattern.
4. What is state in React?
In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state.
State is private and fully controlled by the component. No other component can access the state except the one that owns it.
Example of a state:
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to React world'
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}5. How to pass a parameter to an event handler or callback?
Method 1:
Using arrow function
<button onClick={() => this.handleClick(id)} />
which is equivalent to call the bind() function
<button onClick={this.handleClick.bind(this, id)} />
Method 2:
Passing arguments to an array function
<button onClick={this.handleClick(id)} />
handleClick = (id) => () => { console.log(“Hello, your ticket number is”, id) };
6. What is the purpose of using super constructor with props argument?
A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason for passing props parameter to super() call is to access this.props in the child constructors.
this.props is different only within the constructor. It would be the same outside the constructor.
Passing props:
class MyComponent extends React.Component {
constructor(props) {
super(props) console.log(this.props) // prints { name: 'John', age: 42 }
}
}
Not passing props:
class MyComponent extends React.Component {
constructor(props) {
super() console.log(this.props) // prints undefined // but props parameter is still available
console.log(props) // prints { name: 'John', age: 42 }
} render() {
// no difference outside constructor
console.log(this.props) // prints { name: 'John', age: 42 }
}
}
7. What is the impact of indexes as keys?
React needs to keep track of the elements, for that reason Keys should be always stable, unique & predictable.
Example:
The following code limits the React’s optimizations capability. Here each element’s key will be based on ordering, rather than tied to the data that is being represented.
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}But, if we use element data for unique key, assuming todo.id is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}8. Do I need to rewrite all my class components with hooks?
Not necessarily. But we can try Hooks in a few components (or new components) without rewriting any existing code. Because there are no plans to remove classes in ReactJS.
9. Is Hooks cover all use cases for classes?
Hooks doesn’t cover all use cases of classes but there is a plan to add them soon. Currently, there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet.
10. How to ensure hooks followed the rules in your project?
We can ensure this by using ESLint plugin called eslint-plugin-react-hooks (released by React Team)
Two rules are there:
i) Add the plugin in the project (by executing the command line)
npm install eslint-plugin-react-hooks@next
ii) Applying the below config in ESLint config file
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error"
}
}That’s all for today…Thank for Reading. Give a clap if you liked this article. Happy Learning :)
