How to Use React Hooks with PubNub

For example, look at a Higher-Order Component (HOC) and how it requires you to remake the component logic once you realize there are some commonalities. Even looking on a component level, you can see that to work with state and update a component, it requires you to split your code into multiple lifecycle functions that complicate your code.

React Hooks, before and after. Source

With Hooks, the traditional stateless component becomes a bit more functional. If your function uses Hooks, it is now considered a functional component. There are two main Hooks that make a functional component actually functional.

useState

useState lets a functional component use state by passing in an array of two values that represent the name of the variable and a function to set the value – respectively. The first value is the actual variable where data needs to be stored. The second name is used to set the value of the first variable.

The syntax looks like this:

// myVariable is initialized with "Variable Value"
const [myVariable, setMyVariable] = useState("Variable Value")
//myVariable Value is being assigned as "New Value"
setMyVariable("New Value")

Keep in mind that once the variable is set, the function will re-render!

useEffect

Using the useEffect Hook, you can do everything that you’d usually do inside of the usual lifecycle methods of a component. Check out the difference when compared to the way updates are typically handled in a component.

ComponentDidMount(){
  getReady()
}
ComponentWillUnmount(){
  unReady()
}

Here is how the effect Hook changes the game:

useEffect(() => {
  getReady()
  return(
    unReady()
  )
})

The return function is the optional “cleanup” phase. It lets you perform the same process as the componentWillUnmount function.

Creating a Demo Project

Now that you’ve got a better understanding of Hooks, let’s create a working application using them.

Start off by creating a project using CRA (create-react-app):

npx create-react-app react-hooks

Make sure that you have the latest version of React (16.8.0).

Add PubNub to your project so that you can see your streaming data using a React Hook.

npm install pubnub

Using the useState React Hook

You can use the useState React Hook the same way you would this.state in a typical component. In this use case, you’ll create a component that subscribes to a channel and delivers data streaming through PubNub to the UI.

You’ll use the useState Hook to store the response that you get from the channel. To create that response variable, you’ll initialize it as usual, but along with the response variable, you’ll also create a setResponse variable and assign the useState Hook to both of those.

Whichever value you pass into useState will be the initial value of the response variable. You’ll see how setResponse works when you use the useEffect Hook.

import React, { useEffect, useState } from 'react'
import PubNub from 'pubnub'
export default function Sub(props){
  const [response, setResponse] = useState(0)
  const pubnub = new PubNub({
    subscribeKey: 'YOUR-SUB-KEY'
  });
  pubnub.init(Sub)
  return(
    <div> </div>
  )
}

Using the useEffect React Hook

useEffect is where you’ll update your functional component throughout its life. The intended purpose behind the effect Hook is to perform an API call or subscribe to a data stream. In this case, you’re subscribing to a data stream (ie. a PubNub Channel).

Along with subscribing, you’ll take whichever message that comes in and set it to the response variable. However, instead of assigning it to the response variable like you normally would, use setResponse as a function and pass in the new value for the response variable.

import React, { useEffect, useState } from 'react'
import PubNub from 'pubnub'
export default function Sub(props){
    const [response, setResponse] = useState("New messages will be displayed here!")
    var pubnub = new PubNub({
        subscribeKey: "YOUR-SUB-KEY",
    })
    useEffect(() => {
        pubnub.addListener({
            status: function(statusEvent) {
                if (statusEvent.category === "PNConnectedCategory") {
                }
            },
            message: function(msg) {
                setResponse(msg.message.text)
            }
        })      
        pubnub.subscribe({
            channels: ['Channel1'] 
        });
    })
    return(
        <h1>
            {response}
        </h1>
    )
}

Now, unlike a typical component where you’d use this.response, you’ll be using the response variable like you use any other variable.

Publishing Using the New React Hooks Update

We’ll create a component similar to the Sub component, but change it to be able to publish. This time in the Effect Hook we’ll publish instead of subscribe. When the button is pressed, the state updated and the Effect hook is called.

import React, { useEffect, useState } from 'react'
import PubNub from 'pubnub'
export default function Pub(props){
    const [publish, setPublish] = useState(0)
    var pubnub = new PubNub({
        publishKey: "YOUR-PUB-KEY",
        subscribeKey: "YOUR-SUB-KEY"
    })
    useEffect(() => {
        var publishConfig = {
            channel : "Channel1",
            message: { 
                text: `You've Published ${publish} times!`,
            }
        }
        pubnub.publish(publishConfig, function(status, response) {
        })
    })
    return(
        <button onClick={() => {
            setPublish(publish + 1)
        }}>
            Publish to PubNub!
        </button>
    )
}

We can add these components to our main App component.

import React, { Component } from 'react';
import './App.css';
import Sub from './Sub';
import Pub from './Pub';
class App extends Component {
  render() {
    return (
      <div className="App">
        <h3> Hit the publish button to see how many times you've published!</h3>
        <Sub />
        <Pub />
      </div>
    );
  }
}
export default App;

Running npm start in our terminal will start up our React website and we’ll be able to see how our code performs!