Use local storage state fix (#218)

* Completed first two exercises

* Revert "Completed first two exercises"

This reverts commit cf4d7a8.

* Replace utils useLocalStorageState with the one from 2.extra4.js

---------

Co-authored-by: Jamie Harnum <[email protected]>

Author: jaharnum

src/utils.js

@@ -10,18 +10,27 @@ import * as React from 'react'
 function useLocalStorageState(
   key,
   defaultValue = '',
+  // the = {} fixes the error we would get from destructuring when no argument was passed
+  // Check https://jacobparis.com/blog/destructure-arguments for a detailed explanation
   {serialize = JSON.stringify, deserialize = JSON.parse} = {},
 ) {
   const [state, setState] = React.useState(() => {
     const valueInLocalStorage = window.localStorage.getItem(key)
     if (valueInLocalStorage) {
-      return deserialize(valueInLocalStorage)
+      // the try/catch is here in case the localStorage value was set before
+      // we had the serialization in place (like we do in previous extra credits)
+      try {
+        return deserialize(valueInLocalStorage)
+      } catch (error) {
+        window.localStorage.removeItem(key)
+      }
     }
     return typeof defaultValue === 'function' ? defaultValue() : defaultValue
   })
 
   const prevKeyRef = React.useRef(key)
 
+  // Check the example at src/examples/local-state-key-change.js to visualize a key change
   React.useEffect(() => {
     const prevKey = prevKeyRef.current
     if (prevKey !== key) {