Command Palette

Search for a command to run...

Hectal
Phase 10: Custom Hooks and Reusable Logic
React · Exercise 4 of 6 PreviousNext
Intermediate

useLocalStorage: remember the name

Write useLocalStorage(key, initialValue) that works like useState but reads the saved value (stored as JSON) on the first render and saves the value as JSON whenever it changes.

The starter saves "Guest" under the key username before the app starts, as if the user came before. Use the hook with that key: the input (id="name") must start with Guest, and the greeting id="greeting" says Hello, <name>!. Typing a new name must save it to localStorage as JSON ("Asha" with quotes).

What Check tests

  1. The saved name Guest is loaded on the first render
  2. Typing updates the greeting
  3. The new name is saved as JSON under username
  4. The code defines useLocalStorage and uses it for username

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.