React useEffect is not getting triggered

Question

Here is my code:

state initialization

const [uncheckedColArr, setUncheckedColArr] = useState([]);

Control is reaching to the following function, and also consoling correctly.

const updateFilterValue = (columnName, fieldValue, checked) => {
    let tempUncheckedColArr = uncheckedColArr;
    if (tempUncheckedColArr[columnName] === undefined) {
        tempUncheckedColArr[columnName] = [];
    }
    tempUncheckedColArr[columnName] = _.xor(
        tempUncheckedColArr?.[columnName],
        [fieldValue]
    );
    console.log("uncheckedColArr1", uncheckedColArr);

    setUncheckedColArr(tempUncheckedColArr);
    console.log("tempUncheckedColArr", tempUncheckedColArr);
    console.log("uncheckedColArr2", uncheckedColArr);
};

But, it's not triggering following useEffect whenever unCheckedArr is updated from above function

useEffect(() => {
    console.log("uncheckedColArr", uncheckedColArr);
    uncheckedColArr.map((col) => {
        console.log("col", col);
    });
}, [uncheckedColArr]);

Answer 1

Can you try to copy uncheckedColArr without referance save?

let tempUncheckedColArr = [...uncheckedColArr];

Answer 2

The update function is asyncronous; it will take some time to complete. If you want to wait until the update is done, then you will need to use the promise it returns:

var updates = {};
updates['/users/' + document.getElementById('username').value] = data;
firebase.database().ref().update(updates)
  .then(() => {
    console.log('Saved successfully');
    location.replace('nextpage.html');
  });

Or with async/await:

async function someFunction () {
  var updates = {};
  updates['/users/' + document.getElementById('username').value] = data;
  await firebase.database().ref().update(updates);
  console.log("Saved successfully")
  location.replace("nextpage.html");
}