Estoy trabajando en un proyecto de React y me encontré con un error molesto. He aislado el problema en el siguiente código:

 import ReactDOM from "react-dom"; import React, { useState } from "react"; const Variants = ({ variants, setVariants }) => { function toggleRemove(index) { setVariants((_variants) => { let newVariants = [..._variants]; if (newVariants[index].action === "remove") { newVariants[index].action = undefined; } else { newVariants[index].action = "remove"; } return newVariants; }); } return ( <> {variants.map((variant, index) => ( <div> <span>{variant.title}</span> <button onClick={() => toggleRemove(index)}>Toggle remove</button> </div> ))} </> ); }; const AdminProductTools = ({ product }) => { const [variants, setVariants] = useState(product.variants); return ( <div> <Variants variants={variants} setVariants={setVariants}></Variants> <p>{JSON.stringify(product)}</p> </div> ); }; const Product = () => { const [product, setProduct] = useState({ variants: [{ title: "dummy1" }, { title: "dummy2" }], }); return <AdminProductTools product={product} />; }; const App = () => { return <Product />; }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

Cuando presiono el botón 'Alternar eliminar' junto a una variante, solo espero que cambie el estado de 'variantes'. De alguna manera, la propiedad 'producto' en AdminProductTools también se está actualizando (como se ve en el intervalo cian), aunque nunca se llama a 'setProduct'. Aún más extraño es que si inspecciona Producto en React DevTools, el estado del 'producto' también parece actualizarse, aunque no se refleja en el intervalo amarillo.

¿Cómo puede ser esto?

CodeSandbox: https://codesandbox.io/s/crazy-haze-wk92e?file=/src/index.js