05_react/unterricht/tag52/01_react-app-performance/src/App.jsx

@@ -28,12 +28,16 @@ function App(props) {
       <div className="container py-5">
         <ExampleLazy />
         <hr />
+        <h3>useCallback mit ref- Attribut</h3>
         <ExampleUseCallbackRef />
-        {/* <hr />
-        <ExampleUseRef /> */}
         <hr />
+        <h3>useRef - Hook</h3>
+        <ExampleUseRef />
+        <hr />
+        <h3>useCallback auf EventHandler angewandt</h3>
         <ExampleUseCallback />
         <hr />
+        <h3>memo - Funktion von React</h3>
         <ExampleMemoParent />
         <hr />
         <ExampleUseMemo />

05_react/unterricht/tag52/01_react-app-performance/src/components/examples/ExampleUseCallback.jsx

@@ -8,6 +8,7 @@ const ExampleUseCallback = (props) => {
       { id: 1, title: 'Product 1', description: 'lorem ipsum', price: 10 },
       { id: 2, title: 'Product 2', description: 'ipsum lorem', price: 20 },
       { id: 3, title: 'Product 3', description: 'lorem dolor', price: 30 },
+      { id: 4, title: 'Witcher 3', description: 'free update', price: 0 },
     ],
   );
 
@@ -47,7 +48,7 @@ const ExampleUseCallback = (props) => {
         <ul className="list-group list-group-flush list-products">
           {products.map((product) => (
             <ListItemProduct
-              key={`product-${product.id}`}
+              key={`list-item-product-${product.id}`}
               {...product}
               onClick={(e) => {
                 handleClick(e, product.id);

05_react/unterricht/tag52/01_react-app-performance/src/components/examples/ExampleUseMemo.jsx

@@ -13,7 +13,7 @@ const ExampleUseMemo = (props) => {
   const productsAmount = useMemo(() => {
     console.log('Calculating the number of products');
     return products.length;
-  }, [products]);
+  }, [products]); // Bei Veränderung des "states" (hier: products) wird der Funktionsausdruck neu ausgeführt und der Rückgabewert in die Variable geschrieben
 
   // EventHandler
   const handleChangeText = (e) => {
@@ -21,10 +21,10 @@ const ExampleUseMemo = (props) => {
   };
 
   // Functions
-  // const getNumberProducts = () => {
-  //   console.log('Calculating the number of products');
-  //   return products.length;
-  // };
+  const getNumberProducts = () => {
+    console.log('Calculating the number of products');
+    return products.length;
+  };
 
   return (
     <div className="example-use-memo">

05_react/unterricht/tag52/01_react-app-performance/src/components/examples/LazyComponent.jsx

@@ -1,13 +1,19 @@
+import { useState } from 'react';
+
 const LazyComponent = (props) => {
   // const { } = props;
 
+  const [textLoaded, setTextLoaded] = useState('');
+
   // Simulate a slow content placement // TODO: replace with fetch component
   const wait = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
-  wait(3000);
+  wait(3000).then(() => {
+    setTextLoaded('Content fully loaded');
+  });
 
   return (
     <div className="lazy alert alert-info">
-      <h4>I was loaded late!</h4>
+      <h4>I was loaded late: {textLoaded}</h4>
       <p>This text only appears after the code for this component has been loaded</p>
     </div>
   );

05_react/unterricht/tag52/react-app/package-lock.json

@@ -16,9 +16,9 @@
       },
       "devDependencies": {
         "@types/react": "^19.2.18",
-        "@types/react-dom": "^19.2.4",
+        "@types/react-dom": "^19.2.5",
         "@vitejs/plugin-react": "^6.1.0",
-        "oxlint": "^1.79.0",
+        "oxlint": "^1.80.0",
         "sass-embedded": "^1.103.1",
         "vite": "^8.2.2"
       }

05_react/unterricht/tag52/react-app/package.json

@@ -18,9 +18,9 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.0",
-    "oxlint": "^1.79.0",
+    "oxlint": "^1.80.0",
     "sass-embedded": "^1.103.1",
     "vite": "^8.2.2"
   }