useCallback&useMemo(examples): completed

Author: Hemangshu-Dey

src/App.jsx

@@ -1,15 +1,17 @@
 // COMPONENTS
 import Greeting from "./components/Basics/Greeting";
-import Counter from "./components/Hooks/useStateHook/Counter";
+// import Counter from "./components/Hooks/useStateHook/Counter";
 import Form from "./project/Form";
 import ThemeToggler from "./project/ThemeToggler";
 import HandlingForm from "./components/Hooks/useRefHook/HandlingForm";
+import ChangeTheme from "./components/Hooks/useMemo/ChangeTheme";
+import DisplayList from "./components/Hooks/useCallback/DisplayList";
 // TRY IT YOURSELF COMPONENTS
 import FormDetails from "./tryityourself/Akash/FormDetails";
 import RandomBackground from "./tryityourself/Akash/RandomBackground";
 
 const App = () => {
-  return <RandomBackground />;
+  return <DisplayList />;
 };
 
 export default App;

src/components/Hooks/useCallback/DisplayList.jsx

@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+import List from "./List";
+
+const DisplayList = () => {
+  const [number, setNumber] = useState(1);
+  const [dark, setDark] = useState(false);
+
+  // const getItems = () => {
+  //   return [number, number + 1, number + 2];
+  // };
+
+  const getItems = useCallback(() => {
+    return [number, number + 1, number + 2];
+  }, [number]);
+
+  const theme = {
+    backgroundColor: dark ? "black" : "white",
+    color: dark ? "white" : "black",
+  };
+
+  return (
+    <div style={theme}>
+      <input
+        type="number"
+        value={number}
+        onChange={(e) => setNumber(parseInt(e.target.value))}
+      ></input>
+      <button onClick={() => setDark((prevDark) => !prevDark)}>
+        Change theme
+      </button>
+      <List getItems={getItems} />
+    </div>
+  );
+};
+
+export default DisplayList;

src/components/Hooks/useCallback/List.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+const List = ({ getItems }) => {
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    setItems(getItems());
+
+    console.log("Updating items");
+  }, [getItems]);
+
+  return items.map((item, index) => <div key={index}>{item}</div>);
+};
+
+export default List;

src/components/Hooks/useMemo/ChangeTheme.jsx

@@ -0,0 +1,37 @@
+import { useMemo, useState } from "react";
+
+const ChangeTheme = () => {
+  const [number, setNumber] = useState(0);
+  const [dark, setDark] = useState(false);
+
+  const doubleNumber = useMemo(() => {
+    return slowFunction(number);
+  }, [number]);
+
+  const themeStyles = {
+    backgroundColor: dark ? "black" : "white",
+    color: dark ? "white" : "black",
+  };
+
+  function slowFunction(num) {
+    console.log("Calling slow function");
+    for (let i = 0; i <= 1000000000; i++) {}
+    return num * 2;
+  }
+
+  return (
+    <>
+      <input
+        type="number"
+        value={number}
+        onChange={(e) => setNumber(e.target.value)}
+      ></input>
+      <button onClick={() => setDark((prevDark) => !prevDark)}>
+        Change theme
+      </button>
+      <div style={themeStyles}>{doubleNumber}</div>
+    </>
+  );
+};
+
+export default ChangeTheme;