reactjs - 如何在 React useEffect 中正确清理？

Question

我有一个从 Apollo 订阅接收数据的反应函数。

对于每个订阅，都会创建一个网络连接。我需要在组件卸载时破坏网络连接，但在新订阅到达时不需要。

const { data } = useSubscription(...);
const {connections, setConnections} = useState([]);

const createNetworkConnection = (id) => {
    const connection = new CreatSomeConnection(id);

    connection.onMessage = () => doSomeOtherMutations();

    return connection;
};

useEffect(() => {
    setConnections((current) => [...current, createNetworkConnection(id)]);
}, [data])

如果我将清理添加到上面的钩子中，那么每次新订阅到达时它都会运行，这不是我想要的（我还不想破坏其他网络连接）。

如果我添加另一个钩子useEffect(() => () => doCleanUp(), [])，那么清理函数的范围没有最新的connections（或任何，实际上）。

我认为解决此问题的唯一方法是使用useRef我试图避免的 ?

标签： reactjsapollo