I currently have two arrays which updates based on the onClick event. I want to keep track of this array updates through useMemo ,I want to know which array is getting updated on every click but I want to execute separate function for each array when they are clicked , now I can see code inside useMemo is getting executed for both the click. how to achieve this.
Please refer to code here
import { useEffect, useMemo, useState } from "react";
import "./styles.css";
export default function App() {
const [array1, setArray1] = useState([]);
const [array2, setArray2] = useState([]);
useMemo(() => {
// execute a certain function only when array1 is changed and vis versa
console.log(array1);
}, [array1, array2]);
return (
<div className="App">
<h3>on button click I want log output when only "array1" is pressed </h3>
<button onClick={() => setArray1([1])}>array1</button>
<button onClick={() => setArray2([2])}>array2</button>
</div>
);
}