Custom Hook: useLocalStorage

hooksmedium

20:00starts when you type

Guide

Challenge mode

# Requirements status

not runreturns the value and a setter
not runreturns the initial value when nothing is stored
not runreturns the stored value when there is one
not runsaves every change under its key as JSON
not runaccepts a function of the previous value, like useState
not runupdates when another tab saves the same key
not runreads the new key when the key changes, without overwriting it

# Edge cases

They are shown when you run the tests. Until then they appear as a hidden requirement.

hiddenHidden requirement
hiddenHidden requirement
hiddenHidden requirement

# Statement

Goal

Create the useLocalStorage(key, initialValue) hook: it works like useState, but the value is saved in localStorage under key, so it survives a page reload, and it follows the changes that other tabs save. You practice custom hooks, effects with cleanup and JSON.

What you already have

A skeleton of the hook, as a named export, and a demo that saves a name and a visit counter with it.
Your job is the logic of the hook.
Keep the name useLocalStorage and the export: the tests use the hook through a test component.
The preview runs in a sandbox, so its localStorage lives in memory and starts empty every time the code reloads. In a real page it survives reloads.

Requirements

On the first render it returns the value stored under key (saved as JSON) or, if there is none, initialValue.
It returns [value, setValue]; setValue accepts a new value or a function of the previous one, like useState.
Every change is saved under key as JSON.
When another tab saves the same key (the storage event of window), the value updates.
If the component passes a different key, the hook returns what is stored under the new key (or initialValue), and what was stored under each key stays as it was.

Example

useLocalStorage("color", "green") with nothing stored → "green".
setValue("blue") → it returns "blue", and localStorage.getItem("color") is "\"blue\"".
You reload the page → it returns "blue" again.

Hints

Hint 1

useState accepts a function that computes the initial value only once: read the storage there.

Hint 2

Save in an effect that depends on key and value.

Hint 3

Listen to storage in an effect, and remove the listener in its cleanup.

Concepts

Custom hooks.
localStorage, JSON.stringify and JSON.parse.
Effects with cleanup.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.