reactjs - 如何让 react 将自定义钩子(Hook)的返回值视为稳定的身份？

Question

在 react 文档中，我们可以找到:

Note

React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

有时候，自定义的 hook 也可以保证返回的函数身份是稳定的，是不是可以让 react 知道呢？

与 Jayce444 讨论后补充:
如果 react 不考虑自定义 hook 的返回值作为稳定标识，但我们从其他 hooks 的依赖列表中省略它，npm 会报告警告

Answer 1

在您的情况下，您真的不想只是隐藏自定义代码的警告。 React 为 setState 函数这样做是因为它引用了它自己的库中的某些东西。正如评论者所提到的，您可以禁用该特定行的 linting 规则，但最好只包含此依赖项。
当您编写代码时，您通常希望它与其上下文松散耦合，不对它的确切使用位置做出任何假设。虽然在您当前的用例中，您知道钩子(Hook)中的功能没有改变，但将来可能会改变。考虑这个例子:

const useCustomHook = () => {
    const calculate = useCallback((number) => {
        // Do stuff here
    }, []);
    return ({ calculate });
};


const MyComponent = () => {
    const [number, setNumber] = useState(0);
    const { calculate } = useCustomHook();

    useEffect(() => {
        calculate(number);
    }, [number]);

    // rest of the component
};

简单的例子，你有一个内存 calculate从自定义钩子(Hook)返回的函数，以及组件状态中的数字。当数字改变时，重新计算。你可以看到，我们离开了 calculate出 useEffect依赖项，正如您在用例中想要做的那样。
但是假设这发生了变化，我们用这个替换了自定义钩子(Hook):

const useCustomHook = () => {
    const someValue = useContext(someRandomContext);

    const calculateOne = (number) => {/* some code */};
    const calculateTwo = (number) => {/* some code */};

    const calculate = useCallback(someValue ? calculateOne : calculateTwo, [someValue]);

    return ({ calculate });
};

现在，当上下文值改变时，计算函数也会改变。但是，如果您的组件的 useEffect 中没有该依赖项， ，计算实际上不会被触发，并且您现在的状态中将有一个陈旧/不正确的值。
虽然从技术上讲，目前对您来说具有这种依赖性可能是多余的，但如果您进行防御性编程，您将避免像这样的错误，这些错误可能会让人头疼。特别是因为在使用自定义钩子(Hook)时可以获得依赖链，以及使用其他钩子(Hook)的钩子(Hook)等。它实际上是依赖数组中的一些额外字符，最好只添加它并避免潜在的麻烦.