React.useState does not reload state from props
Functional components where we use useState
to set initial values to our variable, if we pass initial value through props, it will always set same initial value until you don't make use of useEffect
hook,
for example your case this will do your job
React.useEffect(() => {
setUser(props.user);
}, [props.user])
The function passed to useEffect will run after the render is committed to the screen.
By default, effects run after every completed render, but you can choose to fire them only when certain values have changed.
React.useEffect(FunctionYouWantToRunAfterEveryRender)
if you pass only one argument to useEffect it will run this method after every render
you can decide when to fire this FunctionYouWantToRunAfterEveryRender
by passing second argument to useEffect
React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])
as you notice i am passing [props.user] now useEffect
will only fire this FunctionYouWantToRunAfterEveryRender
function when props.user
is changed
i hope this helps your understanding let me know if any improvements are required thanks
I've seen almost all the answers to this question promoting a bad pattern: updating state as a result of a prop change inside a useEffect
call. The useEffect
hook is used for synchronizing your React components with external systems. Using it for synchronizing React states can potentially lead to bugs (because re-renders caused by other effects can lead to unintended state updates). A better solution would be to trigger a reconciliation with a key
prop change in the <Avatar />
component from its parent:
// App.jsx
function App() {
// ...logic here
return <Avatar initialUser={user} key={user.id} />
}
// Avatar.jsx
function Avatar({ initialUser }) {
// I suppose you need this component to manage it's own state
// otherwise you can get rid of this useState altogether.
const [user, setUser] = React.useState(initialUser);
return user.avatar ? (
<img src={user.avatar} />
) : (
<p>Loading...</p>
);
}
You can think of that key
prop in this case as the dependency array of useEffect, but you won't be triggering unintended state changes as a result of unexpected useEffect
calls triggered by the component renders.
You can read more about this here: Putting Props To State
And more info on how useEffect
might be a foot gun, here:
You Might Not Need an Effect
The argument passed to useState is the initial state much like setting state in constructor for a class component and isn't used to update the state on re-render
If you want to update state on prop change, make use of 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>);
}
Working demo