Necesito pasar un objeto complicado a su hijo, y dicho objeto será modificado por otro componente a través de la función de establecimiento relacionada. Eso significa que tengo que almacenar el objeto complicado en un estado. Llamémoslo complicatedState .

El objeto que estoy tratando de almacenar en estado contiene una función y hace referencia a otro estado, llamado estado simpleState . Ambos estados son administrados por el componente Debug . El comportamiento deseado es registrar el último valor de simpleState . El problema es que la función siempre usa el valor desactualizado de simpleState , incluso si simpleState se ha actualizado al hacer clic en un botón.

Escuché sobre useCallback que puede suscribir cambios de otra variable. Lo intenté pero eso no funciona. ¿Alguien tiene alguna idea?

Además, ¿la función de almacenamiento en estado es un esquema de codificación mal formado?

 const { useState } = React; function Child(props) { const { value } = props; const { callback } = value; return <> <button onClick={() => { callback(); }}>Test</button> </> } function Debug() { const [simpleState, setSimpleState] = useState(() => { console.log('calling useState') return { id: 9 } }) const defaultValue = { callback: () => { console.log(simpleState); }, // callback: useCallback(() => { // console.log(simpleState) // }, [simpleState]) } const [complicatedState, setComplicatedState] = useState(defaultValue); return <> <Child value={complicatedState} /> {/* <AnotherComponent onChange={setComplicatedState}> */} <button onClick={() => { const updated = { id: simpleState.id + 1 }; console.log(`outdated: ${JSON.stringify(simpleState)} ==> updated: ${JSON.stringify(updated)}`) setSimpleState(updated) }}>+</button> </> } const rootElement = document.getElementById("root"); ReactDOM.render(<Debug />, rootElement);