反應 useMemo 依賴數組與額外的依賴

Question

從反應文檔：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

向依賴數組添加另一個值是不好的做法，即使它沒有在computeExpensiveValue中使用？

例子：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b, c]);

當 c 的c發生變化時，我有一個 memoizedValue 需要重新計算。 我的 linter 告訴我這是一種不必要的依賴，這讓我相信有一種更有意義的替代解決方案......

我能想到的唯一替代方法是將memoizedValue存儲為 state 值，然后將setMemoizedValue包裝在一個 useEffect 掛鈎中，該掛鈎具有c作為依賴項。

例子：

const [stateNotMemo, setStateNotMemo] = useState({})

useEffect(() => setStateNotMemo(() => return {...someObject},[c])

編輯：基本上我要做的是在我關閉模態時更新memoizedValue 。

const [showModal, setShowModal] = useState(false);

const memoizedValue = useMemo(() => {
    calculateNewValueWhenModalCloses(a,b);
},[a,b,showModal])

const handleCloseModal = () => {
    setShowModal(false);
}

const handleOpenModal = () => {
    setShowModal(true);
}

// Then some jsx that has two buttons. 
// one with onClick={handleCloseModal} (passed to modal component)
// and another with onClick={handleOpenModal}

Answer 1

你可以，但這是代碼的味道。 它表明computeExpensiveValue是不純的，並且它的c ，盡管它不是一個論點。 如果可行，重構它以傳遞c作為附加參數。

useMemo(() => computeExpensiveValue(a, b, c), [a, b, c]);