React - 盡管程序運行良好，但 useMemo 發出警告。 （useMemo 有一個不必要的依賴）

Question

首先對糟糕的代碼感到抱歉。 我是 React 新手，所以請原諒：P。 在這里，我創建了 2 個按鈕，“添加”和“更改假”。 當我點擊“添加”時，它不會重新渲染子組件，當我點擊“更改假”時，它會重新渲染組件，因為我的依賴在 useMemo 中發生了變化，它會創建並發送一個新的 object 道具給孩子. 但是我收到 useMemo 的警告，說它是不必要的依賴，盡管我需要依賴。 我怎么能 go 警告 go 離開。 有一個更好的方法嗎？

注意：我的子組件是一個虛擬組件。 它對這些道具沒有任何作用。

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; 

Output 鏈接： https://i.stack.imgur.com/5spw1.png代碼沙盒鏈接：Z5E056C500A1C4B6A7110B50D807BADE/s-rc: ///-fzio7BADE/spine.

也許是一個愚蠢的問題。 但我會感謝社區的一些反饋：）

Answer 1

fakeValue.current是不必要的依賴，因為改變它不會重新渲染組件。 我們不會將引用添加為依賴項。

您可以通過添加一個空數組作為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 的依賴項時，它不會更改useMemo的randomProp 。 然后子組件不會re-render 。 所以你需要做這樣的事情。

const randomValue = fakeValue.current;

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

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

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