Example of using custom React hooks for managing GraphQL subscriptions

SubscriptionHook.js

import { useEffect, useState } from 'react'
import { API, graphqlOperation } from 'aws-amplify'

const ListTalks = `
  query {
    listTalks {
      items {
        name
        description
        presenter {
          name
          bio
        }
      }
    }
  }
`

const OnCreateTalk = `
  subscription {
    onCreateTalk {
      id
      name
      description
      presenter {
        name
        bio
      }
    }
  }
`

export default () => {
  const [talks, updateTalks] = useState([])

  useEffect(async() => {
    const talkData = await API.graphql(graphqlOperation(ListTalks))
    updateTalks(talkData.data.listTalks.items)
  }, [])
  
  useEffect(() => {
    const subscription = API.graphql(
      graphqlOperation(OnCreateTalk)
    ).subscribe({
        next: data => {
          const { value: { data: { onCreateTalk } }} = data
          const talkData = [...talks, onCreateTalk]
          updateTalks(talkData)
        }
    })

    return () => subscription.unsubscribe()
  }, [talks])

  return talks
}