ReactJS Interview Questions and Answers
Question - 81 : - How can you create a component in React?
Answer - 81 : -
There are two possible ways to create a component in React:
Function Components: This is the simplest way to create a component in React. These are the pure JavaScript functions that accept props object as the first parameter and return React elements:
function Greeting({ message }) {
return
{`Hello, ${message}`}
}
Class Components: The class components method facilitates you to use ES6 class to define a component. The above function component can be written as:
class Greeting extends React.Component {
render() {
return
{`Hello, ${this.props.message}`}
}
}
Question - 82 : - When do we prefer to use a class component over a function component?
Answer - 82 : -
If a component needs state or lifecycle methods, we should use the class component; otherwise, use the function component. However, after React 16.8, with the addition of Hooks, you could use state, lifecycle methods, and other features that were only available in the class component right in your function component.
Question - 83 : - Is it possible for a web browser to read JSX directly?
Answer - 83 : -
Web browsers can't read JSX directly. This is because the web browsers are built to read the regular JS objects only, and JSX is not a regular JavaScript object.
If you want a web browser to read a JSX file, you must transform the files into a regular JavaScript object. For this purpose, Babel is used.
Question - 84 : - What do you understand by the state in React?
Answer - 84 : -
In react, the state of a component is an object that holds some information that may change over the component's lifetime. It would be best to try to make your state as simple as possible and minimize the number of stateful components.
Let's see how to create a user component with message state:
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to React world'
}
}
render() {
return (
)
}
}
The state is very similar to props, but it is private and fully controlled by the component. i.e., It is not accessible to any other component till the owner component decides to pass it.
Question - 85 : - What do you understand by props in React?
Answer - 85 : -
In React, the props are inputs to components. They are single values or objects containing a set of values passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
The main purpose of props in React is to provide the following component functionality:
Pass custom data to your component.
Trigger state changes.
Use via this.props.reactProp inside component's render() method.
For example, let us create an element with reactProp property:
This reactProp name becomes a property attached to React's native props object, which already exists on all React library components.
props.reactProp
Question - 86 : - What do you understand by refs in React?
Answer - 86 : -
Refs is the shorthand used for references in React. It is an attribute which helps to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.
Question - 87 : - What are Forward Refs?
Answer - 87 : -
Ref forwarding is a feature which is used for passing a ref through a component to one of its child components. It can be performed by making use of the React.forwardRef() method. It is particularly useful with higher-order components and specially used in reusable component libraries.
Example
import React, { Component } from 'react';
import { render } from 'react-dom';
const TextInput = React.forwardRef((props, ref) => (
));
const inputRef = React.createRef();
class CustomTextInput extends React.Component {
handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
};
render() {
return (
);
}
}
Question - 88 : - Which is the preferred option callback refs or findDOMNode()?
Answer - 88 : -
The preferred option is to use callback refs over findDOMNode() API. Because callback refs give better control when the refs are set and unset whereas findDOMNode() prevents certain improvements in React in the future.
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView()
}
render() {
}
}
The recommended approach is:
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return
this.node = node} />
}
}
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView()
}
render() {
return
this.node = node} />
}
}
Question - 89 : - Why do we need a Router in React?
Answer - 89 : -
React Router plays an important role to display multiple views in a single page application. It is used to define multiple routes in the app. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular Route. So, we need to add a Router library to the React app, which allows creating multiple routes with each leading to us a unique view.
React Router Example
Question - 90 : - List down the advantages of React Router.
Answer - 90 : -
important advantages of React Router are given below:
- In this, it is not necessary to set the browser history manually.
- Link uses to navigate the internal links in the application. It is similar to the anchor tag.
- It uses Switch feature for rendering.
- The Router needs only a Single Child element.
- In this, every component is specified in .
- The packages are split into three packages, which are Web, Native, and Core. It supports the compact size of the React application.