How to prevent re-rendering with useSubscription()?

Question

Many of you might have heard of GraphQL. It provides QUERY and MUTATION. Also it supports SUBSCRIPTION as 100% replacement of web socket. I'm a big fan of GraphQL and hooks. Today I faced an issue with useSubscription which is a hook version of SUBSCRIPTION. When this subscription is fired, a React component is re-rendered. I'm not sure why it causes re-rendering.

import React from 'react'
import { useSubscription } from 'react-apollo'

const Dashboard = () => {
  ...
  useSubscription(query, {
    onSubscriptionData: data => {
      ...
    }
  })

  render (
    <>
      Dashboard
    </>
  )
}

Actually useSubscription's API doc doesn't say anything about this re-rendering now. It would be really appreciated if you provide me a good solution to preventing the re-rendering.

Thanks!

Answer 1

Just put your subscription in separate component as this guy did, and return null, now your root component won't rerender

function Subscription () {
  const onSubscriptionData = React.useCallback(
    handleSubscription,  // your handler function
    [])

  useSubscription(CHAT_MESSAGE_SUBSCRIPTION, {
    shouldResubscribe: true,
    onSubscriptionData
  })

  return null
}

// then use this component
<Subscription />

Answer 2

In my experience, there is no way to prevent re-render when receiving new data in onSubscriptionData. If your global data is used for calculations, you should use useMemo for you global variable. On the other hand, you should consider do you need put your variable in onSubscriptionData? Are there other ways? Did you use useSubscription in right component? If your have to do that, you have to accept extra rendering.
Hopefully, my answer is helpful for your situation.