React useEffect 跟踪依赖数组最佳实践中所有可用的值

Question

假设这样的情况：

import React, { useEffect, useState } from 'react'
const TestComponent = () => {
const [remoteUser, setRemoteUser] = useState()
const [socket, setSocket] = useState()
//...
useEffect(() => {
if (remoteUser && socket) {
socket.on('userState', (data) => {
handleUserStateChange({ data, remoteUser })
})
}
}, [remoteUser, socket])
//...
}

我通常必须检查 remoteUser 和套接字在 useEffect 的依赖数组中是否真实。

有没有更好的方法，或者这是确保 useEffect 的依赖项数组中的所有值都可用的最佳方法，因为我需要这两个值来使用关联的函数。

Answer 1

免责声明：考虑到您的特定背景，这可能没有意义，但我仍然想在这里在黑暗中拍摄。

如果可能，最佳做法是在效果中创建依赖项。您也可以在效果中设置状态。

尝试这样的事情：

function MyComp({ userId }) {
const [someState, setSomeState] = useState(null);
useEffect(() => {
// just use this as an example, you can create the socket
// instance here, but you'll most likely have some sort of
// deps needed to create your socket
const socket = new ExampleSocket(`/foo/bar/${userId}`);
const handleUserStateChange = ({ data, remoteUser }) => {
setSomeState({ data, removeUser });
};
socket.on('userState', (data) => {
handleUserStateChange({ data, remoteUser })
})
return () => {
// don't forget to clean up your effects
socket.close();
}
}, [userId]);
return // ...
}

为什么？

因为在效果中创建这些值会将它们隔离为具有较少依赖项和更少状态的较小副作用 - 两者都难以管理，因此越少越好。