Excellent question! You're asking about this part:

setApiParameters((prev) => ({ ...prev, models: data }));

👉 Why do we need to put ({ ...prev, models: data }) inside parentheses?

The short answer:

Because we are returning an object literal from an arrow function.

👉 In JavaScript, an arrow function without curly braces {} will implicitly return the expression you write. 👉 BUT if you use { ... } directly after =>, JavaScript thinks this is a function body, not an object.

Example:

(x) => {
  foo: "bar";
}; // This is treated as a function body! Returns undefined.

👉 To tell JavaScript that this is an object literal, not a block of code, you wrap it in parentheses:

(x) => ({ foo: "bar" }); // Now it's clear: return an object!

In your case:

(prev) => ({ ...prev, models: data });

➡️ You want to return an updated object: { ...prev, models: data }

➡️ But if you write:

prev => { ...prev, models: data }

This is invalid — JavaScript thinks this is a function body with no return value.

➡️ So you must wrap the object with ():

(prev) => ({ ...prev, models: data });

Simple rule:

👉 If you use an arrow function and want to immediately return an object → wrap the object in parentheses.

Tiny example to test:

const fn1 = () => {
  foo: "bar";
};
console.log(fn1()); // undefined
 
const fn2 = () => ({ foo: "bar" });
console.log(fn2()); // { foo: 'bar' }

If you want, I can also show you why React state updates often use this pattern and why it is safer in hooks — just tell me. Would you like to? 🚀✨