Scribd
Upload
22 views

Assignment 2

The document discusses the lifecycle of React components. It explains the different phases of mounting, updating, and unmounting. It provides examples and diagrams for the constructor, render, componentDidMount, componentDidUpdate, and componentWillUnmount methods.

Uploaded by

Tejaswi Ramineni
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Assignment 2

The document discusses the lifecycle of React components. It explains the different phases of mounting, updating, and unmounting. It provides examples and diagrams for the constructor, render, componentDidMount, componentDidUpdate, and componentWillUnmount methods.

Uploaded by

Tejaswi Ramineni
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

AP22110010916

ASSIGNMENT - 2

1. Create React Application using functional components.

index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './index'; // Update the import statement
import Component from './Component'; // Import the renamed component

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

component.jsx
import React from 'react';

const Component = () => {


return (
<div>
<h1>This is My Component</h1>
<p>Hello, world!</p>
</div>
);
};

export default Component;


OUTPUT

2. Create React Application using class components.

ClassComponent.jsx
import React, { Component } from 'react';
class ClassComponent extends Component { render() {
return (
<div>
<h1>Hello, I am a Class Component!</h1>
</div>
);
}
}
export default ClassComponent

index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ClassComponent from './ClassComponent';
ReactDOM.render( <React.StrictMode>
<ClassComponent /> </React.StrictMode>, document.getElementById('root')
);
OUTPUT

3. What is the life cycle of React js? Explain by example and diagram.

In React.js, the lifecycle of a component refers to the series of methods that are invoked
at different stages of a component's existence. Understanding the component lifecycle
is crucial for managing state, performing side effects, and optimizing performance.
React 16.3 introduced a new lifecycle method approach which includes mounting,
updating, and unmounting phases.

Here's an overview of the lifecycle methods along with an example and a simplified
diagram:

Mounting Phase
​ constructor():
● Called when the component is initialized.
● Used for setting initial state and binding methods.
​ render():
● Responsible for rendering the component's UI.
● Must be a pure function, meaning it should not modify state or interact
with the DOM directly.
​ componentDidMount():
● Invoked after the component is rendered for the first time.
● Ideal for performing side effects like data fetching, initializing third-party
libraries, etc.
EXAMPLE
import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

class MyComponent extends React.Component {

constructor(props) {

super(props);

this.state = { data: null };

componentDidMount() {

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => this.setState({ data }));

render() {

return <div>{this.state.data}</div>;

}
Updating Phase
​ static getDerivedStateFromProps():
● Invoked right before calling the render method.
● Used to update the state based on changes in props.
​ shouldComponentUpdate():
● Determines if the component should re-render.
● Used for performance optimization by preventing unnecessary re-renders.
​ render(): (Already explained in Mounting Phase)
​ getSnapshotBeforeUpdate():
● Invoked right before changes from the virtual DOM are to be reflected in
the DOM.
● Used for capturing some information from the DOM (e.g., scroll position)
before it potentially changes.
​ componentDidUpdate():
● Invoked after the component's updates are flushed to the DOM.
● Ideal for performing side effects after a component has updated.

EXAMPLE

class MyComponent extends React.Component {


componentDidUpdate(prevProps, prevState) {
if (this.props.data !== prevProps.data) {
}
}

render() {
return <div>{this.props.data}</div>;
}
}
Unmounting Phase
​ componentWillUnmount():
● Invoked immediately before a component is unmounted and destroyed.
● Used for cleanup, such as removing event listeners or canceling network
requests.

EXAMPLE

class MyComponent extends React.Component {


componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return <div>{this.props.data}</div>;
}
}
AP22110010916
Tejaswi Ramineni

You might also like