More React Questions

 

1. How do we avoid re-rendering a component?

We can use the React Lifecycle method

shouldComponentUpdate

to avoid re-rendering of a component even if state or prop values may have changed.

The React

shouldComponentUpdate

method requires you to return a boolean value.

If

true

is returned, it re-renders the component. Else, it won't re-render.

Note

This method only exists as a performance optimization. Do not rely on it to prevent rendering, as this can lead to bugs.

2. Is JSX a necessity for React?

JSX is not a necessity for React.

We can write a React component without using JSX.

Each JSX element is just syntactic sugar for calling

React.createElement(component, props, ...children)

.

So, anything you can do with JSX can also be done with just JavaScript.

Example:

1

const element = <h1 className="greeting">Hello World</h1>;

JSX

The above JSX element compiles to,

1

2

const elementProps = { className: "greeting", children: "Hello world!" };

const element = React.createElement("h1", elementProps);

JAVASCRIPT

3. What are the features of React?

Some of the features of React are:

Virtual DOM

React compares new virtual DOM with current virtual DOM, and the difference will be efficiently updated to the HTML DOM. So, the Virtual DOM helps to render the UI more performantly.

Unidirectional data flow

By Unidirectional data flow, it is less error-prone and easier to debug.

4. What is a Pure Component in React?

A React component can be considered pure if it renders the same output for the same state and props.

Class components that extend the

React.PureComponent

class are treated as pure components.

• Prevents re-rendering of a component if props or state is the same
• Takes care of 
  shouldComponentUpdate
   implicitly
• State and Props are Shallow Compared. It compares the property values of the previous and next state/props.
• Pure Components are more performant in certain cases

5. What is an Event Delegation in React?

Event delegation is a practice to handle events efficiently.

Instead of attaching an event handler to each element, we can attach a single event handler to the parent element.

Example:

1

2

3

4

5

<ul onclick="onClickItem()">

<li>One</li>

<li>Two</li>

<li>Three</li>

</ul>

HTML

The event handler is not attached to each list item. But the event handler is called when any one of the list items in the HTML

ul

element is clicked. This is called Event Delegation.

React also uses Event Delegation internally.

In React 17, events are attached to the root DOM container into which the React tree is rendered.

6. What are the default props when a component is rendered through Route?

When a component is rendered through the route, some of the additional props are passed.

They are:

• match
  : The 
  match
   object contains the information about the path from which the component is rendered.
• history
  : The 
  history
   object has some methods to control the navigation in the browser. It also maintains the history of the routes we navigated. Some of the methods to control the navigation are 
  history.push
  , 
  history.replace
  , etc.
• location
  : The 
  location
   object contains the information about the current URL.

7. How many ways do we pass the props to a Component?

Some of the ways to pass the props to a component are:

• Passing props to any component as we declare attributes for any HTML element.

Example:

1

<Component propName1="propValue1" propName2="propValue2" />

JSX

• Context: It is a mechanism to pass props to child components without doing prop drilling.

For more details, please refer to this

8. What function allows to bind the context of the component?

To bind the context of the components in methods, we can use Arrow functions.

Arrow functions inherit this from the context in which the code is defined.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

import { Component } from "react";

class LoginButton extends Component {

handleClick = () => {

console.log("this is:", this);

};

render() {

return <button onClick={this.handleClick}>Click me</button>;

}

}

export default LoginButton;

JSX

Collapse

9. What is the data flow of React?

The data flow of React is a Unidirectional data flow.

Unidirectional data flow means a one-way data flow where the data has only one way to be passed to all the child components.

It means only one component can maintain and update the state. The state is passed to the child components through props.

When we want to update the state by the event triggered in the child component, we can't directly change the props in child components as props are read-only. But we can pass the function updating the state to the child component through props and the event handler in the child component can call the function sent as props to it.

Thus, the state only gets updated in the parent component as props are read-only. The state is passed to all the child components through the props.

Some of the advantages of Unidirectional data flow are:

• Less error-prone as we have more control over the data
• Easier to debug as we know what data is coming from where

10. What helps React to keep its data unidirectional?

Unidirectional data flow means a one-way data flow where the data has only one way to be transferred to other parts of the application.

Flux helps React for keeping its data unidirectional.

Flux is an architectural pattern proposed by Facebook for building Single Page Applications. It complements React's components by utilizing a unidirectional data flow.

11. How is axios used in React?

Axios is a third-party package for making HTTP requests.

It is similar to the fetch method.

Installation command:

1

npm install axios

GET

1

axios.get(URL, CONFIG)

JAVASCRIPT

POST

1

axios.post(URL, CONFIG)

JAVASCRIPT

PUT

1

axios.put(URL, DATA, CONFIG)

JAVASCRIPT

DELETE

1

axios.delete(URL, CONFIG)

JAVASCRIPT

Both the config and data are optional.