Yl r bcm vg1a e

package.json

@@ -1,5 +1,10 @@
 {
-  "name": "react-calculate-loan-eligibility",
+  "name": "ilive4coding-react-playlist",
+  "author": {
+    "name": "Ronit Mukherjee",
+    "email": "[email protected]",
+    "url": "https://www.youtube.com/watch?v=V6iCEC-FQas&list=PLZjjdd9-SJS18Awh12gvGd9WErraVp93X"
+  },
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/App.js

@@ -1,65 +1,75 @@
-import React from "react";
-import AddData from "./AddData";
-import ViewData from "./ViewData";
-import ViewModes from "./ViewModes";
+import React, { useState, useRef } from "react";
+import ClassBasedCounter from "./ClassBasedCounter";
+import FunctionBasedCounter from "./FunctionBasedCounter";
 
-class App extends React.PureComponent {
-  state = {
-    viewMode: "add",
-    //dataList: [],
-  };
+const App = () => {
+  const [currentLoadedComponent, setCurrentLoadedComponent] = useState(0);
+  const [counterStartingPoint, setCounterStartingPoint] = useState(1);
+  const counterSPIRef = useRef();
 
-  dataList = React.createRef();
-
-  setViewMode(viewMode) {
-    this.setState({ viewMode });
-  }
-
-  addData(data) {
-    this.dataList.current = [...this.dataList.current, data];
-    // this.setState((state) => ({
-    //   dataList: [...state.dataList, data],
-    // }));
-  }
-  addData = this.addData.bind(this);
-
-  render() {
-    return (
-      <div className="App container">
-        <div className="row mt-5">
-          <div className="col">
-            <h1 className="text-center">Use React Ref Differently</h1>
-          </div>
-        </div>
-        <div className="row mt-5 justify-content-center">
-          <div className="col-auto">
-            <ViewModes
-              viewMode={this.state.viewMode}
-              onSetViewMode={this.setViewMode.bind(this)}
+  return (
+    <div className="container">
+      <h1 className="text-center mt-5">Understanding useEffect() in Depth</h1>
+      <div className="row justify-content-center mt-5">
+        <div className="col-auto">
+          <div className="input-group mb-3">
+            <input
+              type="number"
+              className="form-control"
+              placeholder="Set Counter Starting Point"
+              aria-label="Set Counter Starting Point"
+              ref={counterSPIRef}
             />
+            <div className="input-group-append">
+              <button
+                className="btn btn-primary"
+                type="button"
+                onClick={() =>
+                  setCounterStartingPoint(counterSPIRef.current.value)
+                }
+              >
+                Set Now
+              </button>
+            </div>
           </div>
         </div>
-        <div className="row mt-5 justify-content-center">
-          <div className="col-8">
-            {this.state.viewMode === "add" ? (
-              <AddData onAddData={this.addData} />
-            ) : (
-              //<ViewData data={this.state.dataList} />
-              <ViewData data={this.dataList.current} />
-            )}
+      </div>
+      <div className="row justify-content-center mt-5">
+        <div className="col-auto">
+          <div className="btn-group" role="group" aria-label="Basic example">
+            <button
+              type="button"
+              className={`btn ${
+                currentLoadedComponent === 1 ? "btn-success" : "btn-secondary"
+              } `}
+              onClick={() => setCurrentLoadedComponent(1)}
+            >
+              Load Class Based Counter
+            </button>
+            <button
+              type="button"
+              className={`btn ${
+                currentLoadedComponent === 2 ? "btn-success" : "btn-secondary"
+              } `}
+              onClick={() => setCurrentLoadedComponent(2)}
+            >
+              Load Functional Counter
+            </button>
           </div>
         </div>
       </div>
-    );
-  }
-
-  componentDidMount() {
-    console.log("App Mounted");
-    this.dataList.current = [];
-  }
-  componentDidUpdate() {
-    console.log("App Re-Rendered/Updated");
-  }
-}
+      <div className="row">
+        <div className="col">
+          {currentLoadedComponent === 1 && (
+            <ClassBasedCounter startsAt={counterStartingPoint} />
+          )}
+          {currentLoadedComponent === 2 && (
+            <FunctionBasedCounter startsAt={counterStartingPoint} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default App;

src/ClassBasedCounter.js

@@ -0,0 +1,52 @@
+import React from "react";
+
+class ClassBasedCounter extends React.PureComponent {
+  state = {
+    counter: parseInt(this.props.startsAt),
+  };
+
+  intervalRef = React.createRef();
+
+  componentDidMount() {
+    this.intervalRef = setInterval(() => {
+      this.setState((state) => ({ counter: state.counter + 1 }));
+    }, 1000);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.startsAt !== this.props.startsAt) {
+      //Clear old interval
+      clearInterval(this.intervalRef);
+
+      this.setState({ counter: parseInt(this.props.startsAt) });
+
+      this.intervalRef = setInterval(() => {
+        this.setState((state) => ({ counter: state.counter + 1 }));
+      }, 1000);
+    }
+  }
+
+  componentWillUnmount() {
+    //Clear interval
+    clearInterval(this.intervalRef);
+  }
+
+  render() {
+    return (
+      <div className="mt-5">
+        <h2 className="text-center">Class Based Counter</h2>
+        <h3 className="text-center">
+          Counter Starts From {this.props.startsAt}
+        </h3>
+        <p
+          className="text-center text-info"
+          style={{ fontSize: 150, fontWeight: 300 }}
+        >
+          {this.state.counter}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default ClassBasedCounter;

src/FunctionBasedCounter.js

@@ -0,0 +1,40 @@
+import React, { memo, useState, useEffect } from "react";
+
+let FunctionBasedCounter = ({ startsAt = 1 }) => {
+  const [counter, setCounter] = useState(startsAt);
+
+  /* useEffect(() => {
+    setInterval(() => {
+      setCounter((counter) => parseInt(counter) + 1);
+    }, 1000);
+  }, [startsAt]); */
+
+  useEffect(() => {
+    if (counter !== startsAt) {
+      setCounter(startsAt);
+    }
+
+    const intervalId = setInterval(() => {
+      setCounter((counter) => parseInt(counter) + 1);
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [startsAt]);
+
+  return (
+    <div className="mt-5">
+      <h2 className="text-center">Function Based Counter</h2>
+      <h3 className="text-center">Counter Starts From {startsAt}</h3>
+      <p
+        className="text-center text-info"
+        style={{ fontSize: 150, fontWeight: 300 }}
+      >
+        {counter}
+      </p>
+    </div>
+  );
+};
+
+FunctionBasedCounter = memo(FunctionBasedCounter);
+
+export default FunctionBasedCounter;