ReactJS Interview Questions and Answers
Question - 51 : - What are Custom Hooks?
Answer - 51 : -
A Custom Hook is a function in Javascript whose name begins with ‘use’ and which calls other hooks. It is a part of React v16.8 hook update and permits you for reusing the stateful logic without any need for component hierarchy restructuring.
In almost all of the cases, custom hooks are considered to be sufficient for replacing render props and HoCs (Higher-Order components) and reducing the amount of nesting required. Custom Hooks will allow you for avoiding multiple layers of abstraction or wrapper hell that might come along with Render Props and HoCs.
The disadvantage of Custom Hooks is it cannot be used inside of the classes.
Question - 52 : - Explain Strict Mode in React.
Answer - 52 : -
StrictMode is a tool added in version 16.3 of React to highlight potential problems in an application. It performs additional checks on the application.
function App() {
return (
);
}
To enable StrictMode, tags need to be added inside the application:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
,
rootElement
);
StrictMode currently helps with the following issues:
Identifying components with unsafe lifecycle methods:
- Certain lifecycle methods are unsafe to use in asynchronous react applications. With the use of third-party libraries, it becomes difficult to ensure that certain lifecycle methods are not used.
- StrictMode helps in providing us with a warning if any of the class components use an unsafe lifecycle method.
Warning about the usage of legacy string API:
- If one is using an older version of React, callback ref is the recommended way to manage refs instead of using the string refs. StrictMode gives a warning if we are using string refs to manage refs.
Warning about the usage of findDOMNode:
- Previously, findDOMNode( ) method was used to search the tree of a DOM node. This method is deprecated in React. Hence, the StrictMode gives us a warning about the usage of this method.
- Warning about the usage of legacy context API (because the API is error-prone).
Question - 53 : - Name a few techniques to optimize React app performance.
Answer - 53 : -
There are many ways through which one can optimize the performance of a React app, let’s have a look at some of them:
Using useMemo( ) -
- It is a React hook that is used for caching CPU-Expensive functions.
- Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering.
- useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.
Using React.PureComponent -
- It is a base component class that checks the state and props of a component to know whether the component should be updated.
- Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.
Maintaining State Colocation -
- This is a process of moving the state as close to where you need it as possible.
- Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.
- It is better to shift states which are less valuable to the parent component, to a separate component.
Lazy Loading -
- It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performances to a minimum.
Question - 54 : - Does React Hook work with static typing?
Answer - 54 : -
Static typing refers to the process of code check during the time of compilation for ensuring all variables will be statically typed. React Hooks are functions that are designed to make sure about all attributes must be statically typed. For enforcing stricter static typing within our code, we can make use of the React API with custom Hooks.
Question - 55 : - How does the performance of using Hooks will differ in comparison with the classes?
Answer - 55 : -
- React Hooks will avoid a lot of overheads such as the instance creation, binding of events, etc., that are present with classes.
- Hooks in React will result in smaller component trees since they will be avoiding the nesting that exists in HOCs (Higher Order Components) and will render props which result in less amount of work to be done by React.
Question - 56 : - Do Hooks cover all the functionalities provided by the classes?
Answer - 56 : -
Our goal is for Hooks to cover all the functionalities for classes at its earliest. There are no Hook equivalents for the following methods that are not introduced in Hooks yet:
- getSnapshotBeforeUpdate()
- getDerivedStateFromError()
- componentDidCatch()
Since it is an early time for Hooks, few third-party libraries may not be compatible with Hooks at present, but they will be added soon.
Question - 57 : - Can React Hook replaces Redux?
Answer - 57 : -
The React Hook cannot be considered as a replacement for Redux (It is an open-source, JavaScript library useful in managing the application state) when it comes to the management of the global application state tree in large complex applications, even though the React will provide a useReducer hook that manages state transitions similar to Redux. Redux is very useful at a lower level of component hierarchy to handle the pieces of a state which are dependent on each other, instead of a declaration of multiple useState hooks.
In commercial web applications which is larger, the complexity will be high, so using only React Hook may not be sufficient. Few developers will try to tackle the challenge with the help of React Hooks and others will combine React Hooks with the Redux.
Question - 58 : - Explain conditional rendering in React.
Answer - 58 : -
Conditional rendering refers to the dynamic output of user interface markups based on a condition state. It works in the same way as JavaScript conditions. Using conditional rendering, it is possible to toggle specific application functions, API data rendering, hide or show elements, decide permission levels, authentication handling, and so on.
There are different approaches for implementing conditional rendering in React. Some of them are:
- Using if-else conditional logic which is suitable for smaller as well as for medium-sized applications
- Using ternary operators, which takes away some amount of complication from if-else statements
- Using element variables, which will enable us to write cleaner code.
Question - 59 : - How to create a switching component for displaying different pages?
Answer - 59 : -
A switching component refers to a component that will render one of the multiple components. We should use an object for mapping prop values to components.
A below-given example will show you how to display different pages based on page prop using switching component:
import HomePage from './HomePage'
import AboutPage from './AboutPage'
import FacilitiesPage from './FacilitiesPage'
import ContactPage from './ContactPage'
import HelpPage from './HelpPage'
const PAGES = {
home: HomePage,
about: AboutPage,
facilitiess: FacilitiesPage,
contact: ContactPage
help: HelpPage
}
const Page = (props) => {
const Handler = PAGES[props.page] || HelpPage
return
}
// The PAGES object keys can be used in the prop types for catching errors during dev-time.
Page.propTypes = {
page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}
Question - 60 : - How to re-render the view when the browser is resized?
Answer - 60 : -
It is possible to listen to the resize event in componentDidMount() and then update the width and height dimensions. It requires the removal of the event listener in the componentWillUnmount() method.
Using the below-given code, we can render the view when the browser is resized.
class WindowSizeDimensions extends React.Component {
constructor(props){
super(props);
this.updateDimension = this.updateDimension.bind(this);
}
componentWillMount() {
this.updateDimension()
}
componentDidMount() {
window.addEventListener('resize', this.updateDimension)
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimension)
}
updateDimension() {
this.setState({width: window.innerWidth, height: window.innerHeight})
}
render() {
return {this.state.width} x {this.state.height}
}
}