From 9cc04a5e0efbd8230a411bde34c565a3171d29c0 Mon Sep 17 00:00:00 2001
From: Syed Abdullah Ali <syedabdullahali380@gmail.com>
Date: Thu, 10 Jul 2025 17:22:17 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Completed=20understanding=20of=20Re?=
 =?UTF-8?q?act=20lifecycle=20in=20both=20Function=20and=20Class=20Componen?=
 =?UTF-8?q?ts=20=F0=9F=94=84=F0=9F=93=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/component/ClassComponent.tsx    | 116 +++++++++--
 client/src/component/FunctionComponent.tsx | 223 ++++++++++++---------
 client/src/{api => services}/crud.ts       |   2 -
 client/src/ui/Table.tsx                    |  31 +--
 client/src/wrapper/HookWrapper.tsx         |   2 +-
 5 files changed, 243 insertions(+), 131 deletions(-)
 rename client/src/{api => services}/crud.ts (99%)

diff --git a/client/src/component/ClassComponent.tsx b/client/src/component/ClassComponent.tsx
index d1f12b8..3ec9f62 100644
--- a/client/src/component/ClassComponent.tsx
+++ b/client/src/component/ClassComponent.tsx
@@ -1,26 +1,108 @@
-import { Component } from "react";
-import { UserFetchApi } from "../type/crud";
+import React, { Component } from "react";
 import Table from "../ui/Table";
-import { User } from "../type/crud";
-interface Props{
-    result:UserFetchApi
+import { User, UserFetchApi } from "../type/crud";
+
+interface Props {
+  result: UserFetchApi;
+}
+
+interface Column<T> {
+  headerName: string;
+  accessor: keyof T;
 }
 
-class ClassComponent extends Component<Props>{
-    render() {
-         interface Column<T> {
-         headerName: string;
-         accessor: keyof T;
-   }
-        
-       const columnData: Column<User>[] = [
+type State = {
+  users: User[];
+  status: "idle" | "loading" | "success" | "error";
+  count: number;
+};
+
+class ClassComponent extends Component<Props, State> {
+  constructor(props: Props) {
+    // 🔧 Mounting Phase: constructor
+    // Called once when the component is created.
+    // Best place to initialize `state` and bind methods.
+    super(props);
+    console.log("🔧 constructor: called once before component mounts");
+
+    this.state = {
+      users: [],
+      status: "idle",
+      count: 0,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    // 📥 Called on every render (both mount and update)
+    // Use to derive state from props.
+    // Rarely needed. Avoid setting state here unless necessary.
+    console.log("📥 getDerivedStateFromProps");
+    return null;
+  }
+
+  componentDidMount(): void {
+    // ✅ Mounting Phase: componentDidMount
+    // Called once, right after the component is added to the DOM.
+    // Ideal for API calls, subscriptions, etc.
+    console.log("✅ componentDidMount: component is now in the DOM");
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+    // 🔍 Updating Phase: shouldComponentUpdate
+    // Use this to prevent unnecessary renders.
+    // Return false to skip re-render.
+    console.log("🔍 shouldComponentUpdate");
+    return true; // default is true
+  }
+
+  getSnapshotBeforeUpdate(prevProps: Props, prevState: State) {
+    // 📸 Called right before DOM updates
+    // Used to capture scroll positions, etc., before DOM changes
+    console.log("📸 getSnapshotBeforeUpdate");
+    return null;
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State, snapshot: any) {
+    // 🔁 Updating Phase: componentDidUpdate
+    // Called after every re-render caused by state or props change
+    console.log("🔁 componentDidUpdate");
+  }
+
+  componentWillUnmount(): void {
+    // 🧹 Unmounting Phase: componentWillUnmount
+    // Called once, just before the component is removed from the DOM
+    // Ideal for cleanup: timers, subscriptions, event listeners
+    console.log(
+      "🧹 componentWillUnmount: cleanup before component is removed from DOM"
+    );
+
+    // ⚠️ NOTE:
+    // In dev, React Fast Refresh (HMR) may unmount/remount your component automatically,
+    // causing this to run on every save/hot update. This is expected during development.
+  }
+
+  render() {
+    // 🎨 Called during Mounting and Updating
+    // Should return JSX — it must be a pure function (no side effects).
+    console.log(
+      `[DEBUG] 🎨 render() at ${new Date().toLocaleTimeString()}`
+    );
+
+    const columnData: Column<User>[] = [
       { headerName: "Name", accessor: "name" },
       { headerName: "Email", accessor: "email" },
       { headerName: "City", accessor: "city" },
     ];
-    const {data,getDataofUser,status} = this.props.result;
-    return <Table<User> columns={columnData} data={data.data}/>
-    }
+
+    const { data } = this.props.result;
+
+    return (
+      <div>
+        <h2>React Lifecycle Demo (Class Component)</h2>
+        <Table<User> columns={columnData} data={data.data} />
+      </div>
+    );
+  }
 }
-export default ClassComponent
 
+export default ClassComponent;
diff --git a/client/src/component/FunctionComponent.tsx b/client/src/component/FunctionComponent.tsx
index 093cf30..2c4ac51 100644
--- a/client/src/component/FunctionComponent.tsx
+++ b/client/src/component/FunctionComponent.tsx
@@ -1,120 +1,151 @@
-// import logo from './logo.svg';
-import { ChangeEvent,useState } from 'react';
-import {  useHookGetData,useHookDeleteData, useHookPostData, useHookUpdateData } from '../api/crud';
-import { User, UserFetchApi } from '../type/crud';
+import { ChangeEvent, useEffect, useState } from "react";
+import {
+  useHookGetData,
+  useHookDeleteData,
+  useHookPostData,
+  useHookUpdateData,
+} from "../services/crud";
+import { User, UserFetchApi } from "../type/crud";
 
 function FunctionComponent() {
-  const result:UserFetchApi = useHookGetData()  
-  const {status,data,getDataofUser} =result 
-  
-  const {deleteDataofUser} = useHookDeleteData()
-  const {createDataofUser} = useHookPostData()
-  const {updateDataofUser} = useHookUpdateData()
-  
-  const userObj = {
-    name:"",
-    email:"",
-    city:"",
-  }
+  // 🧠 useState is the Function Component equivalent of this.state in class components
+  const userObj = { name: "", email: "", city: "" };
+  const [form, setForm] = useState({ ...userObj });
+  const [isEditId, setEditId] = useState("");
 
-  const [form,setForm] = useState({...userObj})
-  const [isEditId,setEditId] = useState('')
+  // 🧠 Custom hooks managing API data (similar to componentDidMount + data logic)
+  const result: UserFetchApi = useHookGetData();
+  const { status, data, getDataofUser } = result;
 
+  const { deleteDataofUser } = useHookDeleteData();
+  const { createDataofUser } = useHookPostData();
+  const { updateDataofUser } = useHookUpdateData();
 
-  const handaledeleteuserData = async (id:string)=>{
-    try{
-      await deleteDataofUser(id)
-      getDataofUser()
-    }catch (error){
-       console.log(error)
-    }
-  }
+  // 🔄 useEffect = lifecycle in functional components
+  // ✅ Runs once when component is mounted (like componentDidMount)
+  useEffect(() => {
+    console.log("✅ useEffect → acts like componentDidMount");
+    getDataofUser();
 
-  const handaleUpdateUserData = async ()=>{
-    try{
-      console.log('isEditId',isEditId)
-      await updateDataofUser(isEditId,form)
-      setForm({...userObj})
-      setEditId('')
-    }catch (error){
-      console.log(error)
-    }
-  }
+    return () => {
+      // 🧹 Cleanup function = componentWillUnmount
+      console.log("🧹 Cleanup → acts like componentWillUnmount");
+    };
+  }, []); // [] = only once (mount + unmount)
 
-  const handalesaveUsreData = async (e:ChangeEvent<HTMLFormElement>)=>{
-    e.preventDefault()
-   try{
-    if(isEditId){
-       await handaleUpdateUserData()
-    }else{
-      await createDataofUser(form)
+  const handleDeleteUserData = async (id: string) => {
+    try {
+      await deleteDataofUser(id);
+      getDataofUser();
+    } catch (error) {
+      console.log(error);
     }
-    await getDataofUser()
+  };
 
-   }catch(error){
-    console.log(error)
-   }
-  }
+  const handleUpdateUserData = async () => {
+    try {
+      console.log("Editing ID →", isEditId);
+      await updateDataofUser(isEditId, form);
+      setForm({ ...userObj });
+      setEditId("");
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
+  const handleSaveUserData = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      if (isEditId) {
+        await handleUpdateUserData();
+      } else {
+        await createDataofUser(form);
+      }
+      getDataofUser();
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
+  const handleUpdate = (obj: User) => {
+    setEditId(obj._id);
+    setForm({ name: obj.name, email: obj.email, city: obj.city });
+  };
 
-  const handaleUpdate = (obj:User)=>{
-    setEditId(obj._id)
-    setForm({name:obj.name,email:obj.email,city:obj.city})
-  }
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
 
-  const handaleChnage = (e:ChangeEvent<HTMLInputElement>)=>{
-    setForm(prev=>({...prev,[e.target.name]:e.target.value}))
-  }
   return (
     <div className="container">
-      <form className='input-box' onSubmit={handalesaveUsreData}>
-      <input type='text' name="name" value={form.name} onChange={handaleChnage}/>
-      <input type='email'name="email" value={form.email} onChange={handaleChnage}/>
-      <input type='text' name="city" value={form.city} onChange={handaleChnage}/>
-      {isEditId?
-      <>
-      <button type="submit" >Update User</button>
-      <button type="button" onClick={()=>{
-        setForm({...userObj})
-        setEditId('')}}>Reset Update</button>
-      </>:
-       
-       <button type="submit" >Create User</button>}
+      <form className="input-box" onSubmit={handleSaveUserData}>
+        <input
+          type="text"
+          name="name"
+          value={form.name}
+          onChange={handleChange}
+        />
+        <input
+          type="email"
+          name="email"
+          value={form.email}
+          onChange={handleChange}
+        />
+        <input
+          type="text"
+          name="city"
+          value={form.city}
+          onChange={handleChange}
+        />
+
+        {isEditId ? (
+          <>
+            <button type="submit">Update User</button>
+            <button
+              type="button"
+              onClick={() => {
+                setForm({ ...userObj });
+                setEditId("");
+              }}
+            >
+              Reset Update
+            </button>
+          </>
+        ) : (
+          <button type="submit">Create User</button>
+        )}
       </form>
 
-      <div className='center-dev'>
-      {
-        <table border={1} >
+      <div className="center-dev">
+        <table border={1}>
           <thead>
-            <th>Name</th>
-            <th>Email</th>
-            <th>City</th>
-            <th>Date</th>
-            <th>Action</th>
-
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>City</th>
+              <th>Date</th>
+              <th>Action</th>
+            </tr>
           </thead>
           <tbody>
-            {
-                 status&&data.data.map((el:User)=>
-                   <tr>
-                     <td>{el.name}</td>
-                     <td>{el.email}</td>
-                     <td>{el.city}</td>
-                     <td>{new Date(el.createdAt).toLocaleString()}</td>
-                     <td>
-                      <button onClick={()=>handaleUpdate(el)}>Edit</button>
-                      <button onClick={()=>handaledeleteuserData(el._id)}>Delete</button>
-                     </td>
-                   </tr>
-                 )
-            }
-          </tbody> 
+            {status &&
+              data.data.map((el: User) => (
+                <tr key={el._id}>
+                  <td>{el.name}</td>
+                  <td>{el.email}</td>
+                  <td>{el.city}</td>
+                  <td>{new Date(el.createdAt).toLocaleString()}</td>
+                  <td>
+                    <button onClick={() => handleUpdate(el)}>Edit</button>
+                    <button onClick={() => handleDeleteUserData(el._id)}>
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
         </table>
-     
-      }
-    </div>
-    
+      </div>
     </div>
   );
 }
diff --git a/client/src/api/crud.ts b/client/src/services/crud.ts
similarity index 99%
rename from client/src/api/crud.ts
rename to client/src/services/crud.ts
index c7db903..30e5238 100644
--- a/client/src/api/crud.ts
+++ b/client/src/services/crud.ts
@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react"
 import { CleanUser, UserFetchApi } from "../type/crud"
 
-
-
 function useHookGetData():UserFetchApi {
 const [data,setData] = useState({status:false,data:[]}) 
 const getDataofUser = async ()=>{
diff --git a/client/src/ui/Table.tsx b/client/src/ui/Table.tsx
index e76ce22..a5f830c 100644
--- a/client/src/ui/Table.tsx
+++ b/client/src/ui/Table.tsx
@@ -6,13 +6,12 @@ export interface Column<T> {
   render?: (row: T) => ReactNode;
 }
 
-
- interface TabelProps<T>{
-    data:T[],
-    // columns:Column[], //not T[]
-    columns: Column<T>[];   // Strongly typed!
-    mutation?:boolean 
- } 
+interface TabelProps<T> {
+  data: T[];
+  // columns:Column[], //not T[]
+  columns: Column<T>[]; // Strongly typed!
+  mutation?: boolean;
+}
 
 class Table<T> extends Component<TabelProps<T>> {
   render() {
@@ -20,16 +19,18 @@ class Table<T> extends Component<TabelProps<T>> {
     return (
       <table>
         <thead>
-          {columns.map((el) => (
-            <th>{el.headerName}</th>
-          ))}
+          <tr>
+            {columns.map((el, i) => (
+              <th key={i}>{el.headerName}</th>
+            ))}
+          </tr>
         </thead>
         <tbody>
-          {data.map((row) => (
-            <tr>
-              {columns.map((col) => (
-                <td>
-                    {col.render ? col.render(row) : String(row[col.accessor])}
+          {data.map((row, i) => (
+            <tr key={i}>
+              {columns.map((col, i) => (
+                <td key={i}>
+                  {col.render ? col.render(row) : String(row[col.accessor])}
                 </td>
               ))}
               {mutation && (
diff --git a/client/src/wrapper/HookWrapper.tsx b/client/src/wrapper/HookWrapper.tsx
index 97559df..70e210b 100644
--- a/client/src/wrapper/HookWrapper.tsx
+++ b/client/src/wrapper/HookWrapper.tsx
@@ -1,5 +1,5 @@
 import { ComponentType, JSX } from "react"
-import { useHookGetData } from "../api/crud"
+import { useHookGetData } from "../services/crud"
 import { UserFetchApi } from "../type/crud"
 
 interface HookProps {