First of all, you need to atleast know the basic of useState
and useEffect
. So that you can understand the example better.
We are going to see two cases
- How to pass props to state in React Hooks
- How to sync props to state in React Hooks
Passing props to state using useState Hooks
import React, { useState } from 'react';
const Profile = props => {
const [profileState, setProfileState] = useState(props);
return (
<div>
<p>
<strong>Name:</strong>
{profileState.name}
</p>
<p>
<strong>Email:</strong>
{profileState.email}
</p>
</div>
);
};
export default Profile;
Its a simple component which accepts props
. We pass this props as initialState
to useState.
Now, what will happen if the props get changed and does the state get changed and re-render?
No, it wonโt. The state will remain the same, useState
wonโt initialize on props change. Let see it in example.
const App = () => {
const [state, setState] = useState({
name: 'Param',
email: 'param@gmail.com',
});
const handleChange = () => {
setState({
name: 'Vennila',
email: 'vennila@gmail.com',
});
};
return (
<div className="App">
<Profile {...state} />
<button onClick={handleChange}>Change Profile</button>
</div>
);
};
Click on the button, it wonโt change the profile. You can console the props updated but not the UI.
const Profile = props => {
const [profileState, setProfileState] = useState(props);
console.log(profileState, props);
return (
<div>
<p>
<strong>Name: </strong>
{profileState.name}
</p>
<p>
<strong>Email: </strong>
{profileState.email}
</p>
</div>
);
};
The console will show this after the button gets clicked
// profileState - { name: "Param", email: "param@gmail.com" }
// props - { name: "Vennila", email: "vennila@gmail.com" }
Even though the props get updated, the useState didnโt reset the state.
How to sync props to state in React Hooks
This is perfect use case for useEffect
. Whenever props
change, we will set the state inside useEffect.
Lets change the example and see,
...
useEffect(() => {
setProfileState(props);
}, [props]);
...
In this way, whenever props get changed, it will set as the state inside useEffect. useEffect is primarily to handle side effects and this is one of those example for using it.
Check out the example here
Thats all folks, we will see more examples and use cases for react hooks soon ๐
Top comments (5)
Beware though, as syncing props and state is usually an anti-pattern.
True, we need to avoid syncing as much as possible. This is just to show an example
Thank you for the post, Paramanatham.
I am not sure if the code snippet is stripped-down version of actual code, you struggled with.
For this particular case, there'd be no need to save the
prop
to the state at all.Forked Sandbox.
Now the
Profile
is dumb component, which depends on the props only, which also you can further optimize usinguseMemo
ormemo()
Thanks Kim, I understood, this example doesn't make much sense. It was created just to showcase how to sync props to state if there is a need for internal state change without the props change.
Example in a tabbed layout where you already have the data as props, but the current tab has internal data changes which are not used outside. In this case, there is no need to lift the state to parent but can be managed inside the tab and have props as the initial state.
useToastify
I saw a good way