React - 尽管程序运行正常，但 useMemo 发出警告。（useMemo 有不必要的依赖）

Question

首先对糟糕的代码感到抱歉。我是 React 的新手，所以请原谅 :P。在这里，我创建了 2 个按钮，“添加”和“更改假”。当我单击“添加”时，它不会 re-render child 组件，当我单击“更改假”时，它会 re-render 组件，因为我的依赖项在 useMemo 中已更改并且它创建并向 child 发送一个新的 object 道具。但是我收到 useMemo 的警告，说这是不必要的依赖，尽管我需要依赖。我怎样才能让那个警告消失。有更好的方法吗？

注意：我的 child 组件是一个虚拟组件。它对这些道具没有任何作用。

import Child from "./Child";

const Parent = () => {
  const [count, setCount] = useState(0);
  const fakeValue = useRef(10);

  const randomProp = useMemo(() => {
    return { val: fakeValue.current };
  }, [fakeValue.current]);

  const changeFake = () => {
    fakeValue.current = fakeValue.current + 1;
    setCount(count + 1);
  };

  return (
    <>
      <div>{count}</div>
      <div>{fakeValue.current}</div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <button onClick={() => changeFake()}>Change fake</button>
      <Child randomProp={randomProp} />
    </>
  );
};

export default Parent;

输出link：https://i.stack.imgur.com/5spw1.png 代码沙盒 link：https://codesandbox.io/s/silly-pine-fzjw9?file=/src/

也许是个愚蠢的问题。但我很感激社区的一些反馈:)

Answer 1

fakeValue.current 是不必要的依赖，因为改变它不会重新渲染组件。我们不添加 references 作为依赖项。

您可以通过将空数组作为依赖项添加到 useMemo 来移除警告。

const randomProp = useMemo(() => {
  return { val: fakeValue.current };
}, []); // Pass an empty array like this

https://codesandbox.io/s/usememo-warning-67955446-5x8j3

如果您需要进一步的支持，请告诉我。

Answer 2

当您将 fakeValue.current ref 直接传递给 useMemo 的依赖项时，它不会更改 randomProp 的值。那么子组件不会 re-render。所以你需要做这样的事情。

const randomValue = fakeValue.current;

  const randomProp = useMemo(() => {
    return { val: randomValue };
  }, [randomValue]);

如果不需要重新渲染，只想去掉警告，可以去掉fakeValue.current依赖

CodeSandbox link 修改代码：https://codesandbox.io/s/stoic-thunder-9ylxi?file=/src/Parent.js

React - 尽管程序运行正常，但 useMemo 发出警告。（useMemo 有不必要的依赖）

React - useMemo giving warning although program is running fine. (useMemo has an unnecessary dependency)

reactjs

react-usememo

React - 尽管程序 运行 正常，但 useMemo 发出警告。 （useMemo 有不必要的依赖）

React - useMemo giving warning although program is running fine. (useMemo has an unnecessary dependency)

reactjs

react-usememo

React - 尽管程序运行正常，但 useMemo 发出警告。（useMemo 有不必要的依赖）