useSubscription

Refer to the Subscriptions section for a more in-depth overview of useSubscription.

Consider using onData instead of useEffect

If you want to react to incoming data, please use the onData option instead of useEffect. State updates you make inside a useEffect hook might cause additional rerenders, and useEffect is mostly meant for side effects of rendering, not as an event handler. State updates made in an event handler like onData might - depending on the React version - be batched and cause only a single rerender.

Consider the following component:

1export function Subscriptions() {
2  const { data, error, loading } = useSubscription(query);
3  const [accumulatedData, setAccumulatedData] = useState([]);
4
5  useEffect(() => {
6    setAccumulatedData((prev) => [...prev, data]);
7  }, [data]);
8
9  return (
10    <>
11      {loading && <p>Loading...</p>}
12      {JSON.stringify(accumulatedData, undefined, 2)}
13    </>
14  );
15}

Instead of using useEffect here, we can re-write this component to use the onData callback function accepted in useSubscription's options object:

1export function Subscriptions() {
2  const [accumulatedData, setAccumulatedData] = useState([]);
3  const { data, error, loading } = useSubscription(query, {
4    onData({ data }) {
5      setAccumulatedData((prev) => [...prev, data]);
6    },
7  });
8
9  return (
10    <>
11      {loading && <p>Loading...</p>}
12      {JSON.stringify(accumulatedData, undefined, 2)}
13    </>
14  );
15}

⚠️ Note: The useSubscription option onData is available in Apollo Client >= 3.7. In previous versions, the equivalent option is named onSubscriptionData.

Now, the first message will be added to the accumulatedData array since onData is called before the component re-renders. React 18 automatic batching is still in effect and results in a single re-render, but with onData we can guarantee each message received after the component mounts is added to accumulatedData.