Quickstart: PubNub JavaScript SDK in React

The JavaScript SDK works the same in a React app as in any other browser app. What changes is when your code runs. React mounts and unmounts components, and in development it mounts each one twice, so a subscription has to be created and removed with the component.

This quickstart builds a small component that subscribes to a channel, shows incoming messages, and publishes the text you type. It covers only what is specific to React. For the PubNub concepts behind each step, refer to Quickstart: Web.

Before you begin

You need Node.js 22 or later, a React project (such as one created with Vite), and a PubNub publish and subscribe key. To get your keys, follow Get your PubNub keys in the Web quickstart.

Install

SDK version

Always use the latest SDK version to have access to the newest features and avoid security vulnerabilities, bugs, and performance issues.

Install the SDK in your React project:

1npm install pubnub

If you don't have a React project yet, create one first:

1npm create vite@latest my-pubnub-app -- --template react-ts
2cd my-pubnub-app
3npm install
4npm install pubnub

Initialize

Import the SDK and create the client once, outside the component. Creating it inside the component would create a new client on every render.

1

Replace the placeholders with your keys and a unique userId. Keep the userId unchanged for the lifetime of the user or the device. For more information, refer to the Configuration section of the SDK documentation.

Subscribe

Subscribe inside a useEffect hook and return a cleanup function that unsubscribes. React runs the cleanup when the component unmounts.

1

The empty dependency array, [], subscribes once per mount. The handler belongs to this subscription only, so unsubscribing also stops it.

React StrictMode doubles effects in development

In development, StrictMode mounts each component, unmounts it, and mounts it again to expose missing cleanup. Without the cleanup function above, the first subscription stays active and every message appears twice. Production builds run effects once.

For complete details on subscribing and handling events, refer to the Subscribe section of the SDK documentation.

Publish

Publishing is a plain async call, so it needs no special handling in React. This code publishes the text from the input box and clears it after a successful publish.

1

A message can be any JSON-serializable data that is smaller than 32 KiB. For more information, refer to the Publish section of the SDK documentation.

Run

The component below combines all the previous steps. Save it as src/App.tsx, replace the placeholders, and start the app.

1

Verify that it works:

1. Start the development server with npm run dev.
2. Open http://localhost:5173 in your browser.
3. Type Hello, world! in the input box and click Send.
4. The message appears once in the list as YOUR_USER_ID: Hello, world!.
5. To see real-time communication, open the same URL in a second browser tab and send a message from either tab. It appears in both lists.

The component subscribes after it mounts, and it does not show when the subscription becomes active. If you click Send immediately after the page loads, the message can reach the channel before the subscription is active, and it does not appear in your list. Wait a moment, then send it again.

If the message does not arrive, refer to Troubleshooting. If the console shows a 403 (Access Denied) error, your keyset may have Access Manager enabled. Verify that your token has read permissions for the subscribed channel. Refer to Configure access control.

Next steps

• Pick another path on Choose your runtime.
• Try Presence to track online and offline status.
• Implement Message Persistence to store and retrieve messages.
• Use Access Manager to secure your channels.
• Building a chat app? Use the Chat SDK.