3. Component LifeCycle in ReactJS

1. Class Components vs Functional Components

   Class Components (older appraoch to write reactJS code)

   • Require ES6 class syntax.

   • Use this.state and this.setState() to manage state.

   • Have lifecycle methods (componentDidMount, componentDidUpdate, etc.).

   • More boilerplate code.

       import React, { Component } from "react";
     
       class Greeting extends Component {
         constructor(props) {
           super(props);
           this.state = { name: "Ayush" };
         }
     
         render() {
           return <h1>Hello, {this.state.name}!</h1>;
         }
       }
     
       export default Greeting;
     

     Functional component (Modern approach )

     • Simple JavaScript functions.

     • Use React Hooks (useState, useEffect) for state and lifecycle.

     • Less boilerplate, easier to read.

         import React, { useState } from "react";
       
         function Greeting() {
           const [name, setName] = useState("Ayush");
       
           return <h1>Hello, {name}!</h1>;
         }
         export default Greeting;
       

       Functional components are preferred due to hooks, better performance, and easier maintenance.

2. Component LifeCycle

   Lifecycle methods are only available in class components. It the series of events that happen from the mounting of react component to its unmounting.

   Mounting- Component is created in DOM (Birth of an component)

   Update - Components upadte (Growth of an componet)

   Unmount- Component is removed from DOM (Death of an component)

3. Methods in React Components cycle

   1. render() : Used to render HTML of the component in react . This method required class based component to render the DOM

   2. componentDidMount(): Runs after the first render(render())

   3. componentDidUpdate(prevProps, prevState) : Invoked as soon as updating happen. Runs after re-render (used for fetching new data).

   4. componentWillUnmount(): Cleanup method (removes event listeners, stops timers).

    import React, { Component } from "react";

    class LifecycleDemo extends Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
        console.log("Constructor: Initializing state");
      }

      componentDidMount() {
        console.log("componentDidMount: Component mounted!");
      }

      shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate: Should re-render?");
        return true;
      }

      componentDidUpdate() {
        console.log("componentDidUpdate: Component updated!");
      }

      componentWillUnmount() {
        console.log("componentWillUnmount: Cleaning up...");
      }

      render() {
        console.log("Render: Updating UI");
        return (
          <div>
            <h1>Count: {this.state.count}</h1>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Increment
            </button>
          </div>
        );
      }
    }

    export default LifecycleDemo;

4. List & keys in react

   React efficiently renders lists using .map(), but each item should have a unique key.

    function ItemList() {
      const items = ["Apple", "Banana", "Cherry"];
      return (
        <ul>
          {items.map((item) => (
            <li key={item}>{item}</li> // Unique key
          ))}
        </ul>
      );
    }
   
    export default ItemList;
   

5. ref in React

   Refs allow direct interaction with DOM elements.

    import React, { useRef } from "react";
   
    function InputFocus() {
      const inputRef = useRef(null);
   
      return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={() => inputRef.current.focus()}>Focus</button>
        </div>
      );
    }
    export default InputFocus;
   

Next Topic