React中用useMemo跟踪多数组更新并执行对应独立函数

首先要明确：useMemo 的核心用途是缓存计算开销较大的结果，而非处理状态变更后的副作用逻辑。你需要的是监听状态变化并执行对应操作，这应该用 useEffect 来实现。

直接拆分两个独立的 useEffect，分别监听各自的数组状态，就能实现“仅当对应数组更新时执行指定函数”的需求：

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [array1, setArray1] = useState([]);
  const [array2, setArray2] = useState([]);

  // 仅在 array1 更新时执行
  useEffect(() => {
    console.log("array1 已更新:", array1);
    // 这里写 array1 更新时需要执行的独立函数
  }, [array1]);

  // 仅在 array2 更新时执行
  useEffect(() => {
    console.log("array2 已更新:", array2);
    // 这里写 array2 更新时需要执行的独立函数
  }, [array2]);

  return (
    <div className="App">
      <h3>点击按钮后，只有对应数组的日志会输出</h3>
      <button onClick={() => setArray1([1])}>array1</button>
      <button onClick={() => setArray2([2])}>array2</button>
    </div>
  );
}

关键说明： #

• 每个 useEffect 的依赖数组仅包含对应要监听的状态，这样只有当该状态发生变化时，内部的逻辑才会触发。
• 避免把多个不相关的状态放到同一个副作用钩子的依赖里，否则会导致无关状态变更时也触发逻辑，这正是你之前遇到的问题。

内容的提问来源于stack exchange，提问作者Divakar R