Understanding React's setState method

Question

I understand the below code adds a new object to an array of objects but fuzzy on a specific syntax: setProductList([array, obj])

From what I'm seeing, the setProductList function takes in an object. That object consists of an array and an object. So how does it add the object to the array? is this built into JS or React?

// array of products
const Products = [
  {
    item: "basketball",
    price: 3,
    description: "basketball desc",
  },
  {
    item: "football",
    price: 5,
    description: "football desc",
  },
];

// setting state
const [productList, setProductList] = useState(Products);

// handling click
const handleClick = () => {
   // Don't quite understand the syntax of below block
   setProductList([
      ...productList, // spread creates a copy of the array
      {
        item: "baseball",
        price: 4,
        description: "baseball desc",
      },
    ]);
  };

Answer 1

What you are seeing is Spread operator (...)

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

By writing [ (element inside) ], you did create a new array. ...productList alone does not create a new array

You could understand ...productList as it helps you write shorter code, instead of writing like this

setProductList([
  productList[0],
  productList[1],
  // ...
  productList[productList.length - 1],
  {
    item: "baseball",
    price: 4,
    description: "baseball desc",
  },
])

Another example that could help you understand the spread operator, is the use of Math.max. Basically, syntax of Math.max is Math.max(value0, value1, ... , valueN).

For example you have an array of N elements, because Math.max solely could not take an array as arguments, so to calculate max of the array, you could iterate each element and compare

const arr = [1, 3, 2]
let max = -Infinity

for (const num of arr) {
  max = Math.max(max, num)
}

console.log(max)

But now with spread operator, you could achieve the same result in a shorter way

const arr = [1, 3, 2]
let max = Math.max(...arr)

console.log(max)

Answer 2

This feature is built into js and called Object Spreading

Example

var x = [1, 2] // an array

console.log(x)

// spreads an array, and put an extra element
var y = [...x, 6]

console.log(y)

so, the state hook returns a function here - setProductList That just updates the state to the new array.

it's a common practise. See this detailed answer for in deth explanation

Answer 3

Ok, the code which you don't understand basically is setting a new copy of the current array, BUT including the new element (it'd be like push a new element in the array. BUT push would modify the original array. In this case, it's making a copy and pushing the value to that new array)

Lets go line by line. We have:

 setProductList([
      ...productList,
      {
        item: "baseball",
        price: 4,
        description: "baseball desc",
      },
    ]);

We will define:

 setProductList([                       // Line 0
      ...productList,                   // Line 1
      {                                 // Line 2
        item: "baseball",               // Part of Line 2
        price: 4,                       // Part of Line 2
        description: "baseball desc",   // Part of Line 2
      },                                // Part of Line 2
    ]);                                 // Part of Line 1(]) & 0())

• With Line 0 (setProductList) we are setting a new value to productsList because react hooks and useState. (https://reactjs.org/docs/hooks-state.html)
• With Line 1 we are creating a new copy of the array ([...oldArray]) will return a copy of the previous array (You can read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
• With Line 2, we are including a new value at the end of the new array.

Answer 4

I guess your confusion comes from not understanding the spread syntax.

Spread in array literals

A more powerful array literal

Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of push(), splice(), concat(), etc. With spread syntax this becomes much more succinct:

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
//  ["head", "shoulders", "knees", "and", "toes"]

Just like spread for argument lists, ... can be used anywhere in the array literal, and may be used more than once.

When looking at your code:

setProductList([
  ...productList, // spread creates a copy of the array
  {
    item: "baseball",
    price: 4,
    description: "baseball desc",
  },
]);

The statement "spread creates a copy of the array" is incorrect. The spread operator by itself does not create a copy. It takes the items in an iterable (like an array) and and places them in the context as separate arguments/elements.

[...productList]

The above would create a copy because we define a new array and place all the items of productList in this new array. Thus creating a copy.

[...productList, newItem]

Defines a new array, places all the items of productList in this new array and places newItem behind it. Since we added newItem it strictly speaking is not really a copy.