Mi estado de reacción está cambiando sin que yo llame a mi función setState desde useState hook.

Después de una investigación rápida, lo reduje al hecho de que una matriz es un tipo de referencia, por lo que data y los datos tempData comparten la misma referencia y cambian entre sí. Una solución que encontré fue secuenciar y luego analizar los datos: JSON.parse(JSON.stringify(data)) pero esto podría tener algunos impactos de rendimiento bastante malos si se trata de un objeto grande, ¿no? ¿Hay una mejor solución aquí? Redux? ¿O es innecesario? Este es un caso bastante común, ¿no?

Para cualquiera a quien le importe, esto también funciona pero es un poco feo:
cambiar el estado a objeto en lugar de matriz

 const defaultData = { data: [ {id:0, foo:1, bar:2}, {id:1, foo:3, bar:4}, {id:2, foo:4, bar:6}, ] }

 const handleData = (id) => { setData((prevState) => { return {data: data.data.map((i) => i.id === id ? {...i, id:i.id+10} : {...i})} }) }

Adjunto un ejemplo a continuación que se puede crear fácilmente desde create-react-app.

Aplicación.js

 import Child from './Child'; import { useState } from 'react'; const defaultData = [ {id:0, foo:1, bar:2}, {id:1, foo:3, bar:4}, {id:2, foo:4, bar:6}, ] function App() { const [data, setData] = useState(defaultData) const handleData = (id) => { const tempData = data for (const idx in tempData) { const item = tempData[idx] if (item.id === id) { tempData[idx].id += 10 } } } return ( <div> <Child data={data} handleData={handleData} /> </div> ); } export default App;

Niño.js

 export default function Child(props) { const {data, handleData} = props return ( <div> <ul> {data.map((i) => ( <li key={i.id}> <button onClick={() => handleData(i.id)}> {i.foo} {i.bar} </button> </li> ))} </ul> </div> ) }