useState is not re-rendering with push and pop on an array state

I’m attempting to update the usersData variable created using useState so that anytime someone clicks on add user, a data object is added to the beginning of usersData, but the problem is that it only works with spread operators and not with push, pop, or unshift operations, as seen in the code below.

The code below is functioning great, and it updates and re-renders every time usersData changes:

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    const dataUpdated = [data, ...usersData];
    setUsersData(dataUpdated);
  };

However, dataUpdated has the same data as above code, the following code does not re-renders the page:

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    let dataUpdated = usersData;
    dataUpdated.unshift(data);
    setUsersData(dataUpdated);
  };

Answer

The second attempt, which is:

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    let dataUpdated = usersData;
    dataUpdated.unshift(data);
    setUsersData(dataUpdated);
  };

does not re-render because for React nothing has changed, since you are giving the same reference to setUsersData. In fact unshift updates the content without affecting the reference, therfore dataUpdated === usersData.

Every time you need to update an Object or an Array to have a re-render, you need to create a new reference. And the spread operator does that, and this is why your first attempt is working, which is:

const [usersData, setUsersData] = useState([]);

  const receiveUserData = (data) => {
    const dataUpdated = [data, ...usersData];
    setUsersData(dataUpdated);
  };