Scribd
Upload
1 views4 pages

Exp-6 WT

The document outlines the lifecycle of a React component, detailing the phases of mounting, updating, and unmounting, along with code examples for both class and functional components. It emphasizes the importance of managing state and effects, particularly with the use of hooks for improved readability and maintainability. The conclusion highlights the significance of mastering the lifecycle for building efficient and responsive applications.

Uploaded by

Mokshithareddy Yeruva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views4 pages

Exp-6 WT

The document outlines the lifecycle of a React component, detailing the phases of mounting, updating, and unmounting, along with code examples for both class and functional components. It emphasizes the importance of managing state and effects, particularly with the use of hooks for improved readability and maintainability. The conclusion highlights the significance of mastering the lifecycle for building efficient and responsive applications.

Uploaded by

Mokshithareddy Yeruva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Roll No:160122733163………….. Exp. No:6…..… Date:…………………..

Aim: Write code to illustrate the lifecycle of React JS.

Description: The lifecycle of a React component encompasses several distinct phases that
dictate how the component behaves from creation to removal. In the mounting phase, the
component initializes state and prepares for rendering. Once rendered, it enters the updating
phase, where it responds to changes in props or state. Upon unmounting, the component
cleans up any resources it has allocated, ensuring a clean exit. In functional components with
hooks, state management and side effects are handled using useState and useEffect
respectively, offering a more concise and modern approach to component lifecycle
management. Efficient optimization strategies such as shouldComponentUpdate in class
components or careful dependency management in functional components further enhance
performance and responsiveness.

Code:

--mounting phase

import React, { Component } from 'react';

class LifecycleDemo extends Component {

constructor(props) {

super(props);

this.state = { count: 0 };

console.log('Constructor called');

componentDidMount() {

console.log('Component did mount');

render() {

console.log('Render called');

return (

<div>

<h1>Component Lifecycle Demo</h1>

Page No. …………………….. Signature of the Faculty………………………...


Roll No:160122733163………….. Exp. No:6…..… Date:…………………..

<p>Count: {this.state.count}</p>

</div>

);

export default LifecycleDemo;

--updating phase

import React, { Component } from 'react';

class LifecycleDemo extends Component {

// Constructor and render methods from previous example...

componentDidUpdate(prevProps, prevState) {

if (prevState.count !== this.state.count) {

console.log('Component did update');

incrementCount = () => {

this.setState((prevState) => ({ count: prevState.count + 1 }));

};

render() {

// Render method content from previous example...

Page No. …………………….. Signature of the Faculty………………………...


Roll No:160122733163………….. Exp. No:6…..… Date:…………………..

export default LifecycleDemo;

--unmounting phase

import React, { Component } from 'react';

class LifecycleDemo extends Component {

// Constructor, render, and componentDidUpdate methods from previous example...

componentWillUnmount() {

console.log('Component will unmount');

render() {

// Render method content from previous example...

export default LifecycleDemo;

import React, { useState, useEffect } from 'react';

const FunctionalLifecycleDemo = () => {

const [count, setCount] = useState(0);

useEffect(() => {

console.log('Component did mount or update');

return () => {

console.log('Component will unmount');

};

}, [count]); // Only re-run the effect if count changes

Page No. …………………….. Signature of the Faculty………………………...


Roll No:160122733163………….. Exp. No:6…..… Date:…………………..

const incrementCount = () => {

setCount((prevCount) => prevCount + 1);

};

return (

<div>

<h1>Functional Component Lifecycle Demo</h1>

<p>Count: {count}</p>

<button onClick={incrementCount}>Increment</button>

</div>

);

};

export default FunctionalLifecycleDemo;

OUTPUT:

Conclusion: Understanding the React component lifecycle is key to building efficient and
responsive applications. With mounting, updating, and unmounting phases, developers can
manage state, effects, and optimizations effectively. The introduction of hooks in functional
components has simplified lifecycle management, improving code readability and
maintainability. By utilizing optimization techniques like shouldComponentUpdate and
thoughtful dependency management, developers can ensure smooth rendering and enhance
overall application performance. In essence, mastering the React component lifecycle
empowers developers to create high-quality, dynamic, and user-friendly applications.

Page No. …………………….. Signature of the Faculty………………………...

You might also like