diff --git a/samples/react-pnp-js-hooks/README.md b/samples/react-pnp-js-hooks/README.md index f417749d5..66a1295a0 100644 --- a/samples/react-pnp-js-hooks/README.md +++ b/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 diff --git a/samples/react-pnp-js-hooks/assets/sample.json b/samples/react-pnp-js-hooks/assets/sample.json index a4d347e52..a5373ef75 100644 --- a/samples/react-pnp-js-hooks/assets/sample.json +++ b/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 @@ } ] } -] \ No newline at end of file +] diff --git a/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts b/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts index ea96d4874..a5735ca2b 100644 --- a/samples/react-pnp-js-hooks/src/webparts/pnPjsExample/hooks/useDocuments.ts +++ b/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((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((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;