Migrate a class component to hooks

This NoteBox works, but it's a class. Rewrite it as a function component with hooks without changing what the user sees. After your change the code must not contain the word class (className is fine).

Behaviour to keep: typing in #note and pressing Save (#save) adds the trimmed text to <ul id="notes"> and clears the input; empty notes are ignored; document.title is Notes (N) where N is the number of notes, from the first render on.

What Check tests

The title starts as Notes (0) with an empty list
Saving adds the note and clears the input
An empty note is ignored
The title follows the number of notes
No class left: the component uses useState and useEffect

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.

Command Palette

Migrate a class component to hooks