React JS Interview Questions for Intermediate

1. What is conditional rendering in React?

When there are multiple components in react and we want to render components according to our preference and some conditions then we use conditional rendering. In conditional rendering, a condition is specified and if the condition is passed then this component is rendered.

Let us look at this sample code to understand conditional rendering.

{isLoggedIn == false ? <DisplayLoggedOut /> : <DisplayLoggedIn />}        

Here if the boolean isLoggedIn is false then DisplayLoggedOut component will be rendered otherwise DisplayLoggedIn component will be rendered.

2. What is react router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

To install react router type the following command.

npm i react-router-dom        

3. Explain the components of a react-router

The main components of a react-router are:

1. Router(usually imported as BrowserRouter): It is the parent component that is used to store all of the other components. Everything within this will be part of the routing functionality
2. Switch: The switch component is used to render only the first route that matches the location rather than rendering all matching routes.
3. Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the switch components.
4. Link: The Link component is used to create links to different routes.

4. Explain the lifecycle methods of components

A React Component can go through four stages of its life as follows.

• Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
• Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
• Updating: Updating is the stage when the state of a component is updated and the application is repainted.
• Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

5. Explain the methods used in mounting phase of components

Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. he mounting phase consists of two such predefined functions as described below

• componentWillMount() Function: This function is invoked right before the component is mounted on the DOM.
• componentDidMount() Function: This function is invoked right after the component is mounted on the DOM.

6. What is this.setState function in React?

We use the setState() method to change the state object. It ensures that the component has been updated and calls for re-rendering of the component. The state object of a component may contain multiple attributes and React allows using setState() function to update only a subset of those attributes as well as using multiple setState() methods to update each attribute value independently.

7.? What is the use of ref in React?

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all. They have wide functionality as we can use callbacks with them.

The syntax to use ref is

const node = this.myCallRef.current;        

8. What are hooks in React?

Hooks are a new addition in React 16.8. They let developers use state and other React features without writing a class. Hooks doesn’t violate any existing React concepts. Instead, Hooks provide a direct API to react concepts such as props, state, context, refs and life-cycle

9. Explain the useState hook in React?

The most used hook in React is the useState() hook. It allows functional components to manipulate DOM elements before each render. Using this hook we can declare a state variable inside a function but only one state variable can be declared using a single useState() hook. Whenever the useState() hook is used, the value of the state variable is changed and the new variable is stored in a new cell in the stack.

We have to import this hook in React using the following syntax

import {useState} from 'react'        

10. Explain the useEffect hook in react?

The useEffect hook in React eliminates the side effect of using class based components. It is used as an alternative to componentDidUpdate() method. The useEffect hook accepts two arguments where second argument is optional.

useEffect(function, dependency)        

The dependency decides when the component will be updated again after rendering.