Deviopath › React

Unread Count in the Title

Medium · Effects

Show the number of unread messages in the page title.

The count starts at 3 and is shown in <p className="count">Unread: 3</p>.

- "New message" adds 1.

- "Read one" subtracts 1 and is disabled at 0.

- The checkbox "Show count in title" starts checked.

Use useEffect to keep document.title in sync: "(3) Inbox" while the count is above 0 and the checkbox is checked, otherwise just "Inbox". (In the preview this is the title of the preview frame, not of the browser tab.)

Next: Loading Data