Flujo de trabajo del operador de propagación en ReactJS.

React sugiere no mutar el estado. Tengo un array de objetos que estoy manipulando según algunos eventos. Mi pregunta es, ¿está bien escribirlo de esta manera?:

“`*.js
const makeCopy = (arr) => arr.map((item) => ({ …item }));

function SomeComponenet() {
const [filters, setFilters] = useState(aemFilterData);

const handleFilterClick = (filter, c) => {
let copiedFilters = makeCopy(filters);

<pre><code>/**
* Aplicar el cambio también en el padre
*/
if (!("parentId" in filter)) {
copiedFilters[filter.id].open = !copiedFilters[filter.id].open;
}
setFilters(copiedFilters);
</code></pre>

}

}

<pre><code><br />¿Estoy mutando el objeto original al hacerlo de la manera anterior? ¿O hace alguna diferencia si se escribe de esta manera?:

“`*.js
const makeCopy = (arr) => arr.map((item) => ({ …item }));

function SomeComponent() {
const [filters, setFilters] = useState(aemFilterData);

const handleFilterClick = (filter, c) => {
let copiedFilters = makeCopy(filters);

/**
* Aplicar el cambio también en el padre
*/
if (!(“parentId” in filter)) {
copiedFilters = copiedFilters.map((f) => {
if (filter.id === f.id) {
return {
…f,
open: !f.open,
};
} else {
return { …f };
}
});
}
setFilters(copiedFilters);
}

}

¿Cuál es la forma preferida de hacer esto? Los operadores spread se vuelven bastante verbosos y no me gusta, pero prefiero utilizarlos si es la forma en que debo hacerlo aquí. immutable.js y immer no son una opción en este momento.