From 7596c74d14b4f050d4cbeb5c7988caff8c3957ef Mon Sep 17 00:00:00 2001
From: Elar Saks <elarsaks@gmail.com>
Date: Sat, 5 Aug 2023 09:44:32 +0300
Subject: [PATCH 1/2] Fix useId route.

---
 src/App.js                   |  8 +++-
 src/components/AppHeader.jsx |  4 +-
 src/pages/UseId.jsx          | 89 ++++++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5cd7719..502c4f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,16 @@
 import app from "./styles/App.module.css";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
+import AppHeader from "./components/AppHeader";
+import PageNotFound from "./pages/PageNotFound";
 import UseCallback from "./pages/UseCallback";
 import UseContext from "./pages/UseContext";
 import UseEffect from "./pages/UseEffect";
+import UseId from "./pages/UseId";
 import UseMemo from "./pages/UseMemo";
 import UseReducer from "./pages/UseReducer";
 import UseRef from "./pages/UseRef";
-import PageNotFound from "./pages/PageNotFound";
 import UseState from "./pages/UseState";
-import AppHeader from "./components/AppHeader";
 
 export default function App() {
   // Determine the correct base URL based on the environment (local or GitHub Pages)
@@ -36,6 +37,9 @@ export default function App() {
             {/* UseEffect Route */}
             <Route path="useEffect" element={<UseEffect />} />
 
+            {/* UseId Route */}
+            <Route path="useId" element={<UseId />} />
+
             {/* UseMemo Route */}
             <Route path="useMemo" element={<UseMemo />} />
 
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 7733076..666d437 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -37,9 +37,7 @@ export default function AppHeader() {
             useCustom
           </option>
           <option value="/useEffect">useEffect</option>
-          <option value="/useId" disabled>
-            useId
-          </option>
+          <option value="/useId">useId</option>
           <option value="/useMemo">useMemo</option>
           <option value="/useReducer">useReducer</option>
           <option value="/useRef">useRef</option>
diff --git a/src/pages/UseId.jsx b/src/pages/UseId.jsx
index e69de29..409c9c3 100644
--- a/src/pages/UseId.jsx
+++ b/src/pages/UseId.jsx
@@ -0,0 +1,89 @@
+// Import necessary packages, styles, and components
+import info from "../styles/Info.module.css";
+import React, { useState, useCallback } from "react";
+import util from "../styles/Util.module.css";
+import Button from "../components/Button";
+import List from "../components/List";
+
+// Create a context for theme
+export const ThemeContext = React.createContext();
+
+// Default component function
+export default () => {
+  // Create state for number and darkTheme using useState hook
+  const [number, setNumber] = useState(() => 0);
+  const [darkTheme, setDarktheme] = useState(() => true);
+
+  // Theme styles that change based on darkTheme state
+  const theme = {
+    backgroundColor: darkTheme ? "#282c34" : "#fff",
+    color: darkTheme ? "#fff" : "#282c34",
+    padding: "10px 20px",
+    fontSize: "24px",
+    fontWeight: "bold",
+    borderRadius: "5px",
+    border: "2px solid #61DAFB",
+    marginTop: "20px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: "750px",
+  };
+
+  // useCallback hook for creating a memoized version of getItems function
+  const getItems = useCallback(() => {
+    return [number, number + 1, number + 2];
+  }, [number]);
+
+  //* THIS IS DEBUG - Use this function if you want to see the difference between useCallback and not using it
+  //* All the the lis items will be re-rendered if you don't use useCallback
+  // Function that returns an array of numbers
+  // const getItems = () => {
+  //  return [number, number + 1, number + 2];
+  // };
+
+  return (
+    <>
+      {/* Header and Explanation about useCallback */}
+      <h1 className={util["header-1"]}>- useCallback -</h1>
+      <h2 className={`${info["info"]} ${info["border-bottom"]}`}>
+        <span>useCallback</span> is a React hook that accepts a function and a
+        dependencies array as inputs and returns a memoized version of the
+        function. This hook is useful when passing callbacks to optimized child
+        components that rely on reference equality to prevent unnecessary
+        renders. When the dependencies of the <span>useCallback</span> hook
+        remain the same across re-renders, the same function reference is
+        returned by the hook. This approach helps in avoiding the re-creation of
+        functions, thereby saving <span>component</span> re-renders and
+        improving overall performance.
+      </h2>
+
+      {/* Input field to set the number state */}
+      <input
+        type="number"
+        value={number}
+        className={util["input"]}
+        onChange={(e) => setNumber(parseInt(e.target.value))}
+      />
+
+      {/* Button to toggle the darkTheme state */}
+      <Button
+        active={darkTheme}
+        handleClick={() => setDarktheme((prevDarkTeme) => !prevDarkTeme)}
+        text="Toggle Theme"
+      />
+
+      {/* List component that gets items from getItems function */}
+      <div style={theme}>
+        <List getItems={getItems} />
+      </div>
+
+      {/* Use case specific info */}
+      <h2 className={`${info["info"]} ${info["border-top"]}`}>
+        When updating the theme background colors, we are using{" "}
+        <span> useCallback </span> hook to memoize the <span> getItems </span>{" "}
+        function. This helps in preventing the re-creation of the function and
+        the list items are not re-rendered.
+      </h2>
+    </>
+  );
+};

From ef50e60ee6f46dd74b748250da28778a39412893 Mon Sep 17 00:00:00 2001
From: Elar Saks <elarsaks@gmail.com>
Date: Sat, 5 Aug 2023 10:25:11 +0300
Subject: [PATCH 2/2] Finnish useId.

---
 src/components/EmailForm.jsx | 49 +++++++++++++++++++
 src/pages/UseCallback.jsx    |  3 --
 src/pages/UseId.jsx          | 95 ++++++++++--------------------------
 3 files changed, 75 insertions(+), 72 deletions(-)
 create mode 100644 src/components/EmailForm.jsx

diff --git a/src/components/EmailForm.jsx b/src/components/EmailForm.jsx
new file mode 100644
index 0000000..df71b6d
--- /dev/null
+++ b/src/components/EmailForm.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import util from "../styles/Util.module.css";
+
+export default () => {
+  const [email, setEmail] = useState("");
+  const [hover, setHover] = useState(false);
+
+  const emailInputStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    display: "block",
+    fontSize: "1.5rem",
+    fontWeight: "bold",
+    cursor: "pointer",
+    color: hover ? "#fbda61" : "#FFFFFF",
+  };
+
+  const labelStyle = {
+    cursor: "pointer",
+  };
+
+  const handleChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  return (
+    <>
+      <div
+        style={emailInputStyle}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        <label htmlFor="email" style={labelStyle}>
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={email}
+          onChange={handleChange}
+          required
+          className={util["input"]}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/pages/UseCallback.jsx b/src/pages/UseCallback.jsx
index 409c9c3..a421df0 100644
--- a/src/pages/UseCallback.jsx
+++ b/src/pages/UseCallback.jsx
@@ -5,9 +5,6 @@ import util from "../styles/Util.module.css";
 import Button from "../components/Button";
 import List from "../components/List";
 
-// Create a context for theme
-export const ThemeContext = React.createContext();
-
 // Default component function
 export default () => {
   // Create state for number and darkTheme using useState hook
diff --git a/src/pages/UseId.jsx b/src/pages/UseId.jsx
index 409c9c3..55fed52 100644
--- a/src/pages/UseId.jsx
+++ b/src/pages/UseId.jsx
@@ -1,89 +1,46 @@
 // Import necessary packages, styles, and components
 import info from "../styles/Info.module.css";
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import util from "../styles/Util.module.css";
-import Button from "../components/Button";
-import List from "../components/List";
-
-// Create a context for theme
-export const ThemeContext = React.createContext();
+import EmailForm from "../components/EmailForm";
 
 // Default component function
 export default () => {
   // Create state for number and darkTheme using useState hook
   const [number, setNumber] = useState(() => 0);
-  const [darkTheme, setDarktheme] = useState(() => true);
 
-  // Theme styles that change based on darkTheme state
-  const theme = {
-    backgroundColor: darkTheme ? "#282c34" : "#fff",
-    color: darkTheme ? "#fff" : "#282c34",
-    padding: "10px 20px",
-    fontSize: "24px",
-    fontWeight: "bold",
-    borderRadius: "5px",
-    border: "2px solid #61DAFB",
-    marginTop: "20px",
-    marginLeft: "auto",
-    marginRight: "auto",
-    maxWidth: "750px",
+  const style = {
+    color: "#fbda61",
   };
 
-  // useCallback hook for creating a memoized version of getItems function
-  const getItems = useCallback(() => {
-    return [number, number + 1, number + 2];
-  }, [number]);
-
-  //* THIS IS DEBUG - Use this function if you want to see the difference between useCallback and not using it
-  //* All the the lis items will be re-rendered if you don't use useCallback
-  // Function that returns an array of numbers
-  // const getItems = () => {
-  //  return [number, number + 1, number + 2];
-  // };
-
   return (
     <>
-      {/* Header and Explanation about useCallback */}
-      <h1 className={util["header-1"]}>- useCallback -</h1>
+      {/* Header and Explanation about useId */}
+      <h1 className={util["header-1"]}>- useId -</h1>
       <h2 className={`${info["info"]} ${info["border-bottom"]}`}>
-        <span>useCallback</span> is a React hook that accepts a function and a
-        dependencies array as inputs and returns a memoized version of the
-        function. This hook is useful when passing callbacks to optimized child
-        components that rely on reference equality to prevent unnecessary
-        renders. When the dependencies of the <span>useCallback</span> hook
-        remain the same across re-renders, the same function reference is
-        returned by the hook. This approach helps in avoiding the re-creation of
-        functions, thereby saving <span>component</span> re-renders and
-        improving overall performance.
+        <span>useId</span> is a React hook that generates a unique id for a
+        component or HTML element. This hook is useful when you need to assign
+        unique identifiers to elements, especially for accessibility purposes
+        such as linking labels with form controls. When the component
+        re-renders, the <span>useId</span> hook ensures the same unique id is
+        returned, maintaining consistency across re-renders. This approach helps
+        in avoiding the re-generation of ids, thereby maintaining the
+        association between elements and improving overall accessibility and
+        functionality.
       </h2>
 
-      {/* Input field to set the number state */}
-      <input
-        type="number"
-        value={number}
-        className={util["input"]}
-        onChange={(e) => setNumber(parseInt(e.target.value))}
-      />
-
-      {/* Button to toggle the darkTheme state */}
-      <Button
-        active={darkTheme}
-        handleClick={() => setDarktheme((prevDarkTeme) => !prevDarkTeme)}
-        text="Toggle Theme"
-      />
-
-      {/* List component that gets items from getItems function */}
-      <div style={theme}>
-        <List getItems={getItems} />
-      </div>
-
-      {/* Use case specific info */}
-      <h2 className={`${info["info"]} ${info["border-top"]}`}>
-        When updating the theme background colors, we are using{" "}
-        <span> useCallback </span> hook to memoize the <span> getItems </span>{" "}
-        function. This helps in preventing the re-creation of the function and
-        the list items are not re-rendered.
+      {/*  */}
+      <EmailForm />
+      <h2
+        className={`${info["info"]} ${info["border-top"]} ${info["border-bottom"]}`}
+      >
+        By clicking on the <b style={style}>"Email"</b> text{" "}
+        <b style={style}>below</b>, the corresponding input field{" "}
+        <b style={style}> above </b> is activated. This interaction is made
+        possible because both input fields share the same id, generated by the{" "}
+        <span>useId</span> hook.
       </h2>
+      <EmailForm />
     </>
   );
 };