React Deck 3

Question 1

What are the different phases of React component’s lifecycle?

Answer 1

There are three different phases of React component’s lifecycle:

Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.

Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.

Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

Question 2

Explain the lifecycle methods of React components in detail.

Answer 2

Some of the most important lifecycle methods are:

componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.

componentDidMount() – Executed on the client side only after the first render.

componentWillReceiveProps() – Invoked as soon as the props are received 
from the parent class and before another render is called.

shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.

componentWillUpdate() – Called just before rendering takes place in the DOM
.
componentDidUpdate() – Called immediately after rendering takes place.

componentWillUnmount() – Called after the component is unmounted from
the DOM. It is used to clear up the memory spaces.

Question 3

What is an event in React?

Answer 3

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

Events are named using camel case instead of just using the lowercase.
Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

Question 4

How do you create an event handler in React?

Answer 4

class Display extends React.Component({    
    show(evt) {
        // code   
    },   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            

<div>Click Me!</div>

    );    
} });

Question 5

What are synthetic events in React?

Answer 5

Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

Question 6

What is a ref in React?

Answer 6

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

Question 7

List some of the cases when you should use Refs.

Answer 7

Following are the cases when refs should be used:

When you need to manage focus, select text or media playback
To trigger imperative animations
Integrate with third-party DOM libraries

Question 8

How do you modularize code in React?

Answer 8

We can modularize code by using the export and import properties. They help in writing the components separately in different files.

Question 9

How are forms created in React?

Answer 9

React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements can’t directly update their state and their submission is handled by a JavaScript function. This function has full access to the data that is entered by the user into a form.

Question 10

What do you know about controlled and uncontrolled components?

Answer 10

Controlled Components

1. They do not maintain their own state
2. Data is controlled by the parent component
3. They take in the current values through props and then notify the changes via callbacks

you’re controlling the component and showing the changes to the user the whole time.

Uncontrolled Components

1. They maintain their own state
2. Data is controlled by the DOM 3. Refs are used to get their current values