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

February 15, 2022

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 everytime 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);
  };

>Solution :

The second attempt, witch is below,

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

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

do not re-render because for React nothing has changed, since you are giving the same reference (dataUpdated and usersData have the same reference). Objects and Arrays, behave this way, every time you need to update in order to have a re-render, you need to create a new reference. And the spread operator do create a new reference, this is why your first attempt witch below is is working.

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

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