Lesson 12. Custom hooks to use the browser’s APIs 2. Exercise: Access the local storage

Our hook usePersistedStorage is only able to handle strings. Can you improve this hook to accept any value using JSON.stringify and JSON.parse?

const usePersistedState = (key, initialValue) => {
  // This version only supports text :'(
  // We want it to support any kind of value, using JSON!

  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    const existingValue = localStorage.getItem(key)
    if (existingValue !== null) {
      setValue(existingValue)
    }
  }, [key])

  const setAndPersistValue = (newValue) => {
    setValue(newValue)
    localStorage.setItem(key, newValue)
  }

  return [value, setAndPersistValue]
}

const Comp = () => {
  const [person, setPerson] = usePersistedState('json_person', {
    name: 'John Doe',
    age: 42,
  })
  return (
    <>
      <input
        type="text"
        value={person.name}
        onChange={(event) => setPerson({ ...person, name: event.target.value })}
      />
      <input
        type="number"
        value={person.age}
        onChange={(event) =>
          setPerson({ ...person, age: Number(event.target.value) })
        }
      />
    </>
  )
}

render(Comp)
const usePersistedState = (key, initialValue) => {
  // This version only supports text :'(
  // We want it to support any kind of value, using JSON!

  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    const existingValue = localStorage.getItem(key)
    if (existingValue !== null) {
      setValue(existingValue)
    }
  }, [key])

  const setAndPersistValue = (newValue) => {
    setValue(newValue)
    localStorage.setItem(key, newValue)
  }

  return [value, setAndPersistValue]
}

const Comp = () => {
  const [person, setPerson] = usePersistedState('json_person', {
    name: 'John Doe',
    age: 42,
  })
  return (
    <>
      <input
        type="text"
        value={person.name}
        onChange={(event) => setPerson({ ...person, name: event.target.value })}
      />
      <input
        type="number"
        value={person.age}
        onChange={(event) =>
          setPerson({ ...person, age: Number(event.target.value) })
        }
      />
    </>
  )
}

render(Comp)
Result(reset)

const usePersistedState = (key, initialValue) => {
  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    const existingValue = localStorage.getItem(key)
    if (existingValue !== null) {
      try {
        setValue(JSON.parse(existingValue))
      } catch (err) {
        console.error('Error unserializing value.')
      }
    }
  }, [key])

  const setAndPersistValue = (newValue) => {
    setValue(newValue)
    localStorage.setItem(key, JSON.stringify(newValue))
  }

  return [value, setAndPersistValue]
}