♻️ Component Lifecycle Methods

Component Lifecycle Methods

README.md

@@ -199,3 +199,7 @@ export default ClassClick;
 ### [List and Keys](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/017b8b8f7a3121cb1efbeb6bb87b3712ed1e10a0)
 
 ### [Index as key](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/902d326ce3d663f78cdb262180ba933ef9f392a3#diff-85087cfdd57d5bb30b1aac275e7786616c92344ac9c34d6556bf0879bb248287)
+
+### [Styling and CSS Basic](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/ac16748caa1423ec10c5f1066c54470e512a6544)
+
+### [Form Handling](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/4b36f24bf95bfa76b7f8c7fb8599754d4b916ff5)

src/App.js

@@ -14,11 +14,13 @@ import NameList from "./components/NameList";
 import StyleSheet from "./components/StyleSheet";
 import Inline from "./components/Inline";
 import Form from "./components/Form";
+import LifecycleA from "./components/LifecycleA";
 
 function App() {
   return (
     <div className="App">
-      <Form />
+      <LifecycleA />
+      {/* <Form /> */}
       {/* <StyleSheet primary={true} /> */}
       {/* <Inline /> */}
       {/* <NameList /> */}

src/components/LifecycleA.js

@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+import LifecycleB from "./LifecycleB";
+
+class LifecycleA extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: "Saish",
+    };
+    console.log("LifecycleA constructor");
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    console.log("LifecycleA getDerivedStateFromProps");
+    return null;
+  }
+
+  componentDidMount() {
+    console.log("LifecycleA componentDidMount");
+  }
+
+  shouldComponentUpdate() {
+    console.log("LifecycleA shouldComponentUpdate");
+    return true;
+  }
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    console.log("LifecycleA getSnapshotBeforeUpdate");
+    return null;
+  }
+
+  componentDidUpdate() {
+    console.log("LifecycleA componentDidUpdate");
+  }
+
+  changeState = () => {
+    this.setState({
+      name: "SJ",
+    });
+  };
+
+  render() {
+    console.log("LifecucleA render");
+    return (
+      <div>
+        <h1>LifecycleA</h1>
+        <button onClick={this.changeState}>Change State</button>
+        <LifecycleB />
+      </div>
+    );
+  }
+}
+
+export default LifecycleA;
+
+// Component Lifecycle Methods:
+/* 
+1) Mounting:- When an instance of a component is being created and inserted into the DOM.
+        Methods:- constructor, static getDerivedStateFromProps, render, componentDidMount
+2) Updating:- When a component is being re-renedred as a result of changes to either its props or state.
+        Methods:- static getDerivedStateFromProps, shouldComponentUpdate, render, 
+                  getSnapshotBeforeUpdate, componentDidUpdate
+3) Unmounting:- When a component is being removed from DOM.
+        Methods:- componentWillUnmount
+4) Error Handling:- When there is an error during rendering in a lifecycle method or in the 
+                    constructor of any child component.
+        Methods:- static getDerivedStateFromError, componentDidCatch
+*/

src/components/LifecycleB.js

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+
+class LifecycleB extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: "Saish",
+    };
+    console.log("LifecycleB constructor");
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    console.log("LifecycleB getDerivedStateFromProps");
+    return null;
+  }
+
+  componentDidMount() {
+    console.log("LifecycleB componentDidMount");
+  }
+
+  shouldComponentUpdate() {
+    console.log("LifecycleB shouldComponentUpdate");
+    return true;
+  }
+
+  getSnapshotBeforeUpdate() {
+    console.log("LifecycleB getSnapshotBeforeUpdate");
+    return null;
+  }
+
+  componentDidUpdate() {
+    console.log("LifecycleB componentDidUpdate");
+  }
+
+  render() {
+    console.log("LifecucleB render");
+    return (
+      <div>
+        <h1>LifecycleB</h1>
+      </div>
+    );
+  }
+}
+
+export default LifecycleB;