React useState behaviour , questions on the need of a spread (....) operator

why cant I return expenses1 without spreading it in an array? since expenses1 which is the previous data is an array containing an object? from what i can see, {listOfExpenses} takes in an array of objects which is === expenses1

import Expenses from "./components/Expenses/Expenses";
import NewExpenses from "./components/NewExpenses/NewExpenses";
import React, { useState } from "react";

const expenses = [
  { id: "e1", title: "Toilet Paper", amount: 94.12, date: new Date(2020, 7, 14),},
  { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12), },
  { id: "e3", title: "Car Insurance", amount: 294.67, date: new Date(2021, 2, 28),},
  { id: "e4", title: "New Desk (Wooden)", amount: 450, date: new Date(2021, 5, 12), },
];

function App() {
  const [listOfExpenses, setListOfExpenses] = useState(expenses);
  const addExpenseHandler = (expenseData) => {
    setListOfExpenses((expenses1) => {
      console.log(expenses1);
      expenses1.push(expenseData);
      console.log(...expenses1);

      return [...expenses1];
    });
  };

 return (
   <div>
     <NewExpenses onAddExpense={addExpenseHandler} />
     <Expenses expenses={listOfExpenses} />
   </div>
 );
}

So I've tried console logging and compare the data difference between expenses1 and listOfExpenses, they are both the same data type thus why the need of spreading in an array?

> why cant i "return expenses1" without spreading it in an array

Because the first rule of React state is do not modify state directly, which includes not modifying the state of objects that are held in state (like arrays), see the documentation. If you don't return a different array than the one in state, React doesn't see a difference, and doesn't necessarily re-render properly.

The code you have that is using spread is still technically incorrect (though largely harmless I suspect), it should be copying the array before adding to it (or at the same time), not adding it to the array in state (which mutates it, which you mustn't do). Creating a new array by copying a previous one and adding an element can be done with a single array literal:

setListOfExpenses((expenses) => {
    return [...expenses, expenseData];
});

or even

setListOfExpenses((expenses) => [...expenses, expenseData]);

You should never mutate data structures in React (or Redux or RxJs etc.)

The .push() method will mutate the existing array. This means it will update all references to that array, including the one internally uses to keep track of what needs to be updated. Since the old array and new array are equal, react won't update.

Instead, you should always make a new array. While the spread operator, which will copy the array will technically work, it's only because the equality operator in JS is not very good. Do do it properly use:

setListOfExpenses(expenses=>[...expenses, expenseData])

This will create a new array that starts with the original expenses, then adds the expenseData to the end. This will never mutate the original array, so properly update in all cases, even for libraries that use proper equality checks.