依赖刷新，service在组件挂载时会被调用两次

[mrdulin]

尝试使用useDeepCompareEffect + refresh实现依赖刷新功能，文档： https://ahooks.js.org/zh-CN/hooks/use-request/refresy-deps

import React, { useState, useEffect } from "react";
import { useDeepCompareEffect, useRequest } from "ahooks";

const userSchool = (id: string) => {
  switch (id) {
    case "1":
      return "Tsinghua University";
    case "2":
      return "Beijing University";
    case "3":
      return "Zhejiang University";
    default:
      return "";
  }
};

async function getUserSchool(userId): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(userSchool(userId));
    }, 1000);
  });
}

const Example1 = () => {
  const [filter] = useState({ userId: "1" });
  const { refresh } = useRequest(() => {
    console.log("[example 1] filter: ", filter);
    return getUserSchool(filter.userId);
  });

  useDeepCompareEffect(() => {
    refresh();
  }, [filter]);

  return <div>example 1</div>;
};

const Example2 = () => {
  const [userId] = useState("1");
  const { refresh } = useRequest(() => {
    console.log("[example 2] userId: ", userId);
    return getUserSchool(userId);
  });

  useEffect(() => {
    refresh();
  }, [userId]);

  return <div>example 2</div>;
};

export default () => {
  return (
    <div>
      <Example1 />
      <Example2 />
    </div>
  );
};

组件挂载时，logs:

可以看到<Example1/>中的service被调用了两次

codesandbox

[liuyib]

useRequest 挂载就会请求，然后获取数据后内部状态更新，render 一次。你 useDeepCompareEffect 里又 refresh 了一次请求，再更新一次，这是预期表现。

想要初次只更新一次，把：

useDeepCompareEffect(() => {
    refresh();
  }, [filter]);

换成：

useUpdateEffect(() => {
    refresh();
  }, [filter.userId]);

[mrdulin]

更新了问题中的代码用于更好的演示

为什么文档中使用useEffect + refresh +基本数据类型的例子只会调用一次service?
而，useDeepCompareEffect + refresh + 引用数据类型会调用两次service

在没看源码的情况下，我武断的认为useDeepCompareEffect和useEffect唯一的区别就是对deps比较算法，前者使用lodash.isEqual()，后者使用Object.is()

使用useDeepCompareEffect而不是useUpdateEffect是因为deps是个嵌套的引用数据类型，是一个对象，具有大量属性，且这些属性的值也是引用数据类型，同时也为了减少代码量，不用将每个属性都罗列在deps中，因此需要使用deepEqual对deps进行比较。

[liuyib]

为什么文档中使用useEffect + refresh +基本数据类型的例子只会调用一次service?

你是指这块吗：

emmmm... 你这么一说，我感觉文档这里写的有问题

---

在没看源码的情况下，我武断的认为useDeepCompareEffect和useEffect唯一的区别就是对deps比较算法，前者使用lodash.isEqual()，后者使用Object.is()

这是对的

但 useDeepCompareEffect 和 useUpdateEffect 的区别就不仅仅是深浅比较的问题了。useUpdateEffect mount 时不触发。

感觉文档应该改一下，改成：

我会再确认下。

同时也为了减少代码量，不用将每个属性都罗列在deps中，因此需要使用deepEqual对deps进行比较

这一点目前满足不了哦，应该有个 useUpdateDeepCompareEffect mount 时不触发，然后支持深比较。目前的 useDeepCompareEffect mount 时仍会触发一次。

[liuyib]

@crazylxr @li-jia-nan @hchlq @miracles1919 看下呢，我感觉文档是错的，需要改下

[mrdulin]

@liuyib OK，我也想是否有个useDeepCompareUpdateEffect hook， 我知道useUpdateEffect在componentDidMount时不触发，示例中比较的是useEffect和useDeepCompareEffect. useEffect在mount和update时会触发，那么文档中的示例getUserSchool为何只被调用了一次?