Bugs in the example implementation: messageHistory state definition and markup

[darkhaniop]

Hi,

I decided to try this package for the first time and noticed that the WebSocketDemo component in the Example Implementation in "README.md" does not work out of the box. I made it work with a small fix (bug 1), and then noticed a problem with markup that produces a not-so-good-looking page (bug 2).

1. messageHistory state instantiation bug

The problem is in the messageHistory state instantiation line:

const [messageHistory, setMessageHistory] =
    useState < MessageEvent < any > [] > [];

The example works after changing it to:

const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);

2. Makrup

When I put this component in an empty app (no other components and CSS styles), all of the text in the UI was jumbled up and was hard to read (see the first screenshot).

The screenshot shows no visual separation between "The WebSocket is currently Open" and "Last message: Hello." Similarly, no space between "Request served by 7811941c69e658" and the message history (four times "Hello"). I made the following minimal changes to fix this:

• Inserted several line breaks, <br />.
• Inside <ul>...</ul>, in the Message History list, replaced the <span> element with <li>.
• Added a heading to visually separate the list from the other elements.

The second screenshot shows the page after these changes.

Package versions in my env

I created the test app with npm create vite@latest, then installed this package with npm i react-use-websocket.

Here's the npm list output:

├── @eslint/js@9.23.0
├── @types/react-dom@19.0.4
├── @types/react@19.0.12
├── @vitejs/plugin-react@4.3.4
├── eslint-plugin-react-hooks@5.2.0
├── eslint-plugin-react-refresh@0.4.19
├── eslint@9.23.0
├── globals@15.15.0
├── react-dom@19.0.0
├── react-use-websocket@4.13.0
├── react@19.0.0
├── typescript-eslint@8.28.0
├── typescript@5.7.3
└── vite@6.2.3

[darkhaniop]

Just noticed that if I allow Prettier to format the README on save, it will revert the example back to the buggy version. Also, it seems the issue appears only when formatting a .md file, no problem when it formats a .tsx file.

[TrevorPage]

Thank you! Saved this React n00b a bit of head-scratching.

[darkhaniop]

@TrevorPage glad it helped)