Merge pull request #3070 from bcameron1231/pnp-js-hooks

Clean up of sample

samples/react-pnp-js-hooks/README.md

@@ -56,6 +56,7 @@ react-pnp-js-hooks | [Beau Cameron](https://github.com/bcameron1231) ([@beau__ca
 Version|Date|Comments
 -------|----|--------
 1.0|Oct 09, 2022|Initial release
+1.1|Oct 18, 2022|Clean up in hook variables
 
 ## Minimal Path to Awesome
 

samples/react-pnp-js-hooks/assets/sample.json

@@ -10,7 +10,7 @@
             "This solution builds off of the solution react-async-await-sp-pnp-js submitted by Jose Quinto, and re-work of the existing class based react-pnp-js-sample by Julie Turner. This implementation refactors to take aspects out and utilize and showcase PnPjs Version 3 using React Functional Components and Hooks."
         ],
         "creationDateTime": "2022-10-17",
-        "updateDateTime": "2022-10-17",
+        "updateDateTime": "2022-10-18",
         "products": [
             "SharePoint"
         ],
@@ -47,4 +47,4 @@
             }
         ]
     }
-]
+]

samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts

@@ -18,8 +18,6 @@ const useDocuments = () => {
 
   //side effect with empty depdency array, means to run once
   useEffect(() => {
-    //mount logic to prevent updates to state when unmounted. Typically we'd use AbortController with Fetch, just can't with PnPjs
-    let mounted = true;
     (async () => {
       try {
         // do PnP JS query, some notes:
@@ -39,7 +37,7 @@ const useDocuments = () => {
           .expand("File/Length")();
 
         // use map to convert IResponseItem[] into our internal object IFile[]
-        const documents: IFile[] = response.map((item: IResponseItem) => {
+        const items: IFile[] = response.map((item: IResponseItem) => {
           return {
             Id: item.Id,
             Title: item.Title || "Unknown",
@@ -48,37 +46,26 @@ const useDocuments = () => {
           };
         });
 
-        //only update state if we are still mounted
-        if (mounted) {
-          // Add the items and totalsize to the state of the hook
-          setDocuments(documents);
-          setTotalSize(
-            documents.length > 0
-              ? documents.reduce<number>((acc: number, item: IFile) => {
-                  return acc + Number(item.Size);
-                }, 0)
-              : 0
-          );
-        }
+        // Add the items and totalsize to the state of the hook
+        setDocuments(items);
+        setTotalSize(
+          items.length > 0
+            ? items.reduce<number>((acc: number, item: IFile) => {
+                return acc + Number(item.Size);
+              }, 0)
+            : 0
+        );
       } catch (err) {
-        if (mounted) {
-          setError(true);
-        }
+        setError(true);
         Logger.write(
           `${LOG_SOURCE} (getting files useEffect) - ${JSON.stringify(err)} - `,
           LogLevel.Error
         );
       }
-
-      //best practice to return a cleanup method in scenarios where component unmounts before completion
-      return () => (mounted = false);
     })();
   }, []);
 
   const updateDocuments = async () => {
-    //mount logic to prevent updates to state when unmounted. Typically we'd use AbortController with Fetch, just can't with PnPjs
-    let mounted = true;
-
     try {
       const [batchedSP, execute] = _sp.batched();
 
@@ -109,24 +96,16 @@ const useDocuments = () => {
         items[i].Name = item.Title;
       }
 
-      //only update state if we are still mounted
-      if (mounted) {
-        //Update the state
-        setDocuments(items);
-        setError(false);
-      }
+      //Update the state
+      setDocuments(items);
+      setError(false);
     } catch (err) {
-      if (mounted) {
-        setError(true);
-      }
+      setError(true);
       Logger.write(
         `${LOG_SOURCE} (updating titles) - ${JSON.stringify(err)} - `,
         LogLevel.Error
       );
     }
-
-    //best practice to return a cleanup method in scenarios where component unmounts before completion
-    return () => (mounted = false);
   };
 
   return [documents, updateDocuments, totalSize, isError] as const;