在 useEffect 中使用自定义字符串作为依赖项正确且安全吗？

Question

我在项目中遇到了以下代码，其中创建了一个自定义字符串作为 useEffect 挂钩的依赖项：

定义refreshKey

const refreshKey = [
    pageIndex,
    filterActive,
    viewSetting,
    itemType,
    sortingValue,
    userLanguage,
    sortOrder,
    window.location.href,
    searchQuery
].join("_")

然后的用法：

useEffect(() => {
    // Fetch or update data when any of the dependencies change
    fetchData();

    // The effect depends on the custom `refreshKey`
}, [refreshKey]);

我担心的是：

1. 这是在 useEffect 中使用自定义字符串作为依赖项的正确方法吗？

2. 在依赖项数组中单独列出每个状态变量而不是将它们组合成单个字符串会更安全或更可靠吗？

3. 这会导致组件出现意外行为吗？

Answer 1

不建议这样做。

refreshKey

每次渲染都会是新的，持续的依赖会导致许多不必要的重新渲染。

是的，在依赖项数组中单独列出每个状态变量始终是更好的选择。

useEffect(() => {
    // Fetch or update data when any of the dependencies change
    fetchData();

    // The effect depends on individual state variables
}, [pageIndex, filterActive, viewSetting, itemType, sortingValue, userLanguage, sortOrder, searchQuery]);