El argumento pasado a useState es el estado inicial muy parecido a establecer el estado en el constructor para un componente de clase y no se usa para actualizar el estado al volver a renderizar

Si desea actualizar el estado en el cambio de prop, utilice useEffect hook

 function Avatar(props) { const [user, setUser] = React.useState({...props.user}); React.useEffect(() => { setUser(props.user); }, [props.user]) return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); }

demostración de trabajo

Componentes funcionales donde usamos useState para establecer valores iniciales a nuestra variable, si pasamos el valor inicial a través de accesorios, siempre establecerá el mismo valor inicial hasta que no haga uso del gancho useEffect ,

por ejemplo, su caso, esto hará su trabajo

 React.useEffect(() => { setUser(props.user); }, [props.user])

La función pasada a useEffect se ejecutará después de que el procesamiento se confirme en la pantalla.

De forma predeterminada, los efectos se ejecutan después de cada procesamiento completo, pero puede optar por activarlos solo cuando ciertos valores han cambiado.

 React.useEffect(FunctionYouWantToRunAfterEveryRender)

si pasa solo un argumento a useEffect, ejecutará este método después de cada renderizado, puede decidir cuándo activar esta FunctionYouWantToRunAfterEveryRender pasando el segundo argumento a useEffect

 React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

como nota que estoy pasando [props.user] ahora, useEffect solo activará esta función FunctionYouWantToRunAfterEveryRender cuando props.user cambie

espero que esto ayude a su comprensión avíseme si se requieren mejoras gracias

puede crear sus propios ganchos simples personalizados para esto. Los ganchos cambiaron el valor predeterminado cuando cambió.

https://gist.github.com/mahmut-gundogdu/193ad830be31807ee4e232a05aeec1d8

 import {useEffect, useState} from 'react'; export function useStateWithDep(defaultValue: any) { const [value, setValue] = useState(defaultValue); useEffect(() => { setValue(defaultValue); }, [defaultValue]); return [value, setValue]; }

#Ejemplo

 const [user, setUser] = useStateWithDep(props.user);